router

重定向redirect

  {
    path: '/',
    redirect: '/a' //重定向
  },

嵌套路由 children

PageB页面中需要<router-view/>占位符来展示Test页面

  {
    path: '/b/:id',
    props: true,
    component: PageB,
    children: [
      {
        path: 'test',//访问路径/b/1/test
        component: Test,
      }
    ]
  }

路由独享的守卫beforeEnter

  {
    path: '/a/:id',
    name: 'PageA',
    //路由独享的守卫
    beforeEnter: (to, from, next) => {
        if(to.path==="/test"){
          alert("请登录");
          next(false); // 禁止跳转
        }else{
          next()
        }
    },
    component: () => import('@/views/PageA.vue')
  },

设置路由导航的两种方法： <router-link :to="..."> 和router.push(...)

// 字符串
<router-link to="apple"> to apple</router-link>
// 对象
<router-link :to="{path:'apple'}"> to apple</router-link>
// 命名路由
<router-link :to="{name: 'applename'}"> to apple</router-link>
//直接路由带查询参数query，地址栏变成 /apple?color=red
<router-link :to="{path: 'apple', query: {color: 'red' }}"> to apple</router-link>
// 命名路由带查询参数query，地址栏变成/apple?color=red
<router-link :to="{name: 'applename', query: {color: 'red' }}"> to apple</router-link>
//直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略
<router-link :to="{path: 'apple', params: { color: 'red' }}"> to apple</router-link>
// 命名路由带路由参数params，地址栏是/apple/red
<router-link :to="{name: 'applename', params: { color: 'red' }}"> to apple</router-link>

// 字符串
router.push('apple')
// 对象
router.push({path:'apple'})
// 命名路由
router.push({name: 'applename'})
//直接路由带查询参数query，地址栏变成 /apple?color=red
router.push({path: 'apple', query: {color: 'red' }})
// 命名路由带查询参数query，地址栏变成/apple?color=red
router.push({name: 'applename', query: {color: 'red' }})
//直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略
router.push({path:'applename', params:{ color: 'red' }})
// 命名路由带路由参数params，地址栏是/apple/red
router.push({name:'applename', params:{ color: 'red' }})

总结
无论是直接路由“path" 还是命名路由“name”，带查询参数query，地址栏会变成“/url?查询参数名：查询参数值“
直接路由“path" 带路由参数params params 不生效;
命名路由“name" 带路由参数params 地址栏保持是“/url/路由参数值”;

全局前置守卫beforeEach 写在main.js中

beforeEach函数有三个参数：
to:router即将进入的路由对象
from:当前导航即将离开的路由
next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。

// 全局前置守卫
router.beforeEach((to, from, next) => {
  if(to.fullPath === '/shoppingCart'){
    next('/login')
  }else{
    console.log('beforeEach')
    next()
  }
});