Vue全家桶vue-router

安装

• npm install vue-router -D

使用

• 必须引入Vue, 使用Vue.use()

   import Vue from 'vue'
   import Router from 'vue-router'
   import HelloWorld from '../'
   
   Vue.use(Router) 
   export default new Router({
       routes:[
         {
             path: '/',
             name: 'HelloWorld',
             component: HelloWorld,
             children:[  //子路由 
                {
                    path: '/..'
                    ...
                }
             ]
             
         },{
             path: '/detail/:id',   //动态路由
             ...
             meta:{
                 keepAlive: false  //缓存路由页面( 路由元信息)
             }
         }
       ]
   })
   
   main.js
   import router from './router'
   new Vue({
       ...
       router,
   })

声明式导航

  <router-link to=[pathName]></router-link>
  <router-view></router-view>  //占位符

编程式导航

• 参数结合 name path params query
• name 和 params (常用)
• path 和 query （刷新页面，动态参数不消失。详情页）
• path 和 params （不生效）

  this.$router.push({   //类似 this.$router.replace ( 不会向浏览器添加记录)
      path: 'home',
      name: 'home',
      params: {},
      query: {},
  })
  <router-view></router-view>
  this.$router.go( -1 )  //跳转几页

获取传入的参数

  this.$route.params 

命名视图

• 展示多个视图，且不是嵌套展示。(一个名字，多个视图)

           const router = new Router({
            routes: [
              {
                path: '/',
                components: {   //注意 是 复数
                  default: Foo,
                  a: Bar,
                  b: Baz
                }
              }
            ]
          })
          <router-view class="view one"></router-view>
          <router-view class="view two" name="a"></router-view>
          <router-view class="view three" name="b"></router-view>

重定向 redirect，别名alias

  ...
    routes:[
        {
            path: '/a', 
            redirect: '/b', 
            alias: '/c' //别名
        }
    ]
  ...

导航守卫（拦截器）

• 全局前置守卫

  router.beforeEach( (to, from, next) => {
       if (!to.meta.requireAuth) { // 判断该路由是否需要登录权限
          let token = sessionStorage.getItem('access_token');
          if(token){
              next();
          }else{
              next('/login');
          }
      }else{
          next();
      }
  })
  to: 目标对象
  from： 源头对象
  next: 下一步
      next() 通过
      next(false) 中断
      next('/pathName')  拦截跳转页面
      

• 全局后置钩子

  router.afterEach((to, from) => {
      
  })

• 独享的守卫

   routes:[
      {
          beforeEnter: () => {} 
      }
   ]

• 组件内守卫

   beforeRouterEnter
   beforeRouteUpdate
   beforeRouteLeave 

路由懒加载

 const Footer = () => import('../.vue') ;
 const Baz = r => require.ensure([], ()=>r(require('./Baz.vue')), '/baz') ; //ES5 太长，本人不愿使用
 
 new Router({
     routes:[
        {
            path: '/'
            ..
            component: Footer 
        }
     ]
 })