浅谈路由配置

没有子菜单的路由配置

        

/ 订单管理
  {
    path: "/order",
    component: Layout,
    children: [
      {
        path: "",
        component: ()=> import("@/views/layout/order/Order.vue")
      }
    ]
  },

有子菜单的路由配置

// 商品管理
  {
    path: "/goods",
    component: Layout,
    redirect: "/goods/goods-list",
    children: [
      {
        path: "goods-list",
        component: ()=> import("@/views/layout/goods/GoodsList.vue")
      },
      {
        path: "goods-add",
        component: ()=> import("@/views/layout/goods/GoodsAdd.vue")
      },
      {
        path: "goods-type",
        component: ()=> import("@/views/layout/goods/GoodsType.vue")
      }
    ]
  },

路由守卫router.beforeEach

// 路由守卫 3个参数 to from next
// to  到哪里去
// from 从哪里来
// next 是放行函数
router.beforeEach((to, from, next) => {
  let tk = local.get("tk");

  if (to.path == "/login") {
    // 只要访问登录页 永远放行
    next();
  } else if (tk) {
    next();
  } else if( !tk ){
    // 如果token不存在 就应该回到登录页
    router.push("/login")
  }
})


解决路由相同报错的问题  index.js 的路由文件中使用
Vue.use(VueRouter)

// 解决相同路由报错的问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)