小橙子

前端

47
文章
37
分类
19
标签

vue路由

vue-router

基本使用

  • 下载 npm i vue-router --save
  • 1: 在main.js中引入该对象 import VueRouter from 'vue-router';
  • 2：安装插件 Vue.use(VueRouter);
  • 3: 配置路由规则(创建一个关于当前实例的路由对象)
    • let router = new VueRouter(构造选项);
  • 构造选项: { routes:[ {锚点值,显示什么} ,{锚点值,显示什么} ] }
  • 4:让Vue运行实例能拿到router配置(路由配置)传递给new Vue
  • 5:留坑 <router-view></router-view>
1
2
3
4
5
6
7
8
9
10
11
12
//安装插件
Vue.use(VueRouter); //  到底做了什么
//创建路由对象，配置路由规则
let router = new VueRouter({
    routes:[
        {// #/home
            //路是哪(必须)   //显示什么
            path:'/home',    component:Home
        }
    ]
});
  • 使用方法: <router-link to="/xxxx">电影</router-link>
  • 当这个元素的锚点值与当前的锚点值匹配以后，vue-router就会为其自动加上
  • router-link-active样式 可以方便我们设置用户点中后的效果，以及锚点匹配后的效果
  • 查询字符串
    • 1:去哪里
    • <router-link :to="{name:'bj',query:{id:1} }">查询字符串</router-link>
    • 2:导航(路由规则)
    • {name:'bj' ,path:'/beijing'} -> 生成: href="#/beijing?id=1"
    • 3:去了干嘛
    • this.$route.query.id
  • path的方式
    • 1:去哪里
    • <router-link :to="{name:'bj',params:{id:1} }">查询字符串</router-link>
    • 2:导航(路由规则)
    • {name:'bj' ,path:'/beijing/:id'} -> 生成: href="#/beijing/1"
    • 3:去了干嘛
    • this.$route.params.id

vue-router中的对象

  • 路由信息对象 $route
  • 路由功能对象 $router
  • 安装插件的时候，挂载的相关属性
  • 如果需要在vue中挂载全局的属性供所有组件使用
    • Vue.prototype.xxx = config;
    • this.xxx; //获取配置

多视图(命名视图)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//用以下三个组件替代home一个组件更灵活，便于维护
import HomeHeaderVue from './c/HomeHeaderVue.vue';
import HomeBodyVue from './c/HomeBodyVue.vue';
import HomeFooterVue from './c/HomeFooterVue.vue';
// import Home from './Home.vue';  //头、尾、中  替换成3个组件来完成渲染
//安装插件
Vue.use(VueRouter);
//创建路由对象，配置路由规则
let router = new VueRouter({
    routes:[
        {  
            name:'home',path:'/home',
            components:{
                homeHeader:HomeFooterVue,
                default:HomeBodyVue,
                homeFooter:HomeHeaderVue,             
                        } 
        }
    ]
});

嵌套路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//子路由的视图显示的组件
import Music from './Music.vue';
import Movie from './Movie.vue';
//安装插件
Vue.use(VueRouter);
//创建对象配置路由规则
let router = new VueRouter();
//router-view包含router-view
router.addRoutes([
    { name:'home',path:'/home',component:Home,
    children:[
        { name:'home.music',path:'music',component:Music},
        { name:'home.movie',path:'movie',component:Movie},
    ]   }//路由规则存在子路由
]);
--------------------------------------------------------------
  //home
  <div class="d">我是广告</div>
        <router-link :to="{name:'home.music'}">音乐</router-link>
        <router-link :to="{name:'home.movie'}">电影</router-link>
        <!-- 用户显示子视图个性化数据 -->
   <router-view></router-view>

重定向及404

{path:’/‘,redirect:{name:’xxx’} }-> 跳转到另一个路由

1
2
3
4
5
6
7
8
9
let router = new VueRouter({
    routes:[
        // {path:'/',redirect:'/home'},  默认的页面
        {path:'/',redirect:{name:'home'} }, //维护成本更低
        { name:'home',path:'/myhome',component:Home },
        { path:'*',component:NotFound},  //路由规则是从上到下匹配的
    ]
});

编程式导航

  • 获取信息对象$route
  • 具备操作行为的对象$router
  • 编程式导航更为灵活，可以以各种事件来触发，并且前后可以加入操作的代码
  • 跳转: this.$router.push({ name:’home’,query:{id:1})
  • 前进和后退: this.$router.go(-1) 后退 go(1)前进

scoped

  • 在style标签上 加上scoped属性
  • 让当前的style样式只对同文件中的template有效

前端权限控制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
router.beforeEach((to, from, next) => {
      //假如后台返回 当前用户 只有goods类的权限，说明当前用户就不能进入photo
      let permissions = 'goods';//假如服务器返回权限
      console.log('to',to);
      console.log(to.name.startsWith(permissions));
      console.log('from',from);
      //next(); //放行  行为: 1:放行 ,2:不放行 3:重定向
      if(to.name.startsWith(permissions)){
          next();
      }else{
          alert('您好，您不具备权限访问该页面');
          next(false);
      }
});