vue router踩坑

前端这点事 2020年04月08日 15:38 1374 0

在搭建公司的pc项目时候，因为需要做动态菜单，所以需要利用vue.addRoutes去做权限路由的添加，我暂且称之为“权限路由”，对于login、404页面，这种直接放在静态路由里面，也就是初始化的时候的路由。上代码：

<script>
const static_routes = [
  {
    path: "",
    component: resolve => require(["@/layout/index"], resolve),
    name: "管理界面",
    meta: {},
    children: [
      {
        path: 'test',
        component: resolve =>
          require(["../views/test/frist"], resolve),
        name: "测试页面1",
        meta: {},
      }
    ]
  },
  {
    path: "/404",
    component: resolve => require(["@/views/404"], resolve),
    name: "404",
    meta: {}
  },
  {
    path: '/login',
    component: resolve => require(["@/views/login"], resolve),
    name: "登陆",
    meta: {}
  }
];
</script>

<script>
const router = new VueRouter({ 
    mode: "history", 
    base: process.env.BASE_URL, 
    static_routes 
});
</script>

表面一看，貌似什么问题，但其实问题已经出来了，因为实例化router的时候，默认传的时routes: routes, 但是现在变成了static_routes: static_routes，很明显，

实例化路由的时候，缺少了一个属性，所以不能想当然，如果非要改，你可以routes: static_routes，记下一笔，留个纪念！！！

标签： Vue

本文地址： https://www.ltonus.com/Vue/vue-router-bug.html

文章来源：前端这点事