vue路由中的根路径和空路径的区别?
发布于 5 年前 作者 yuanshuai007 5423 次浏览 来自 问答

根路径 ‘/’ 和空路径’’ 好像可以替换。以官网的例子为例 官网的例子 jsfiddle
把children中的空路径改成根路径效果一样

 routes: [
    {
      path: '/user/:id', component: User,
      children: [
        // 当 /user/:id 匹配成功,
        // UserHome 会被渲染在 User 的 <router-view> 中
        { path: '', component: UserHome },

        // ...其他子路由
      ]
    }
  ]

如果把空路径改成根路径效果是一样的。当 /user/:id 匹配成功, UserHome 会被渲染在 User 的 <router-view> 中

 routes: [
    {
      path: '/user/:id', component: User,
      children: [
        // 当 /user/:id 匹配成功,
        // UserHome 会被渲染在 User 的 <router-view> 中
        { path: '/', component: UserHome },

        // ...其他子路由
      ]
    }
  ]

同时,我还发现如果单独使用的根路径,换成空路径也一样。比如:

const router = new VueRouter({
  routes: [
    {
      path: '/', //换成''效果一样
      component:Home
    }
  ]
})
回到顶部