脚本宝典收集整理的这篇文章主要介绍了关于vue-router嵌套路由，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

在vue-router文档，嵌套路由一节，给了一个例子：

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

后面有一句加粗的话：

要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。

这句话不是很理解。

今天配置路由的时候，碰到一个诡异的情况：

const router = new VueRouter({
  routes: [
    { 
        path: '/user', 
        component: User,
    },
    { 
        name: 'user2', 
        path: 'user2',  // 此处没加斜杠
        component: User2,
    },
  ]
})

然后在使用的时候，使用name：

<router-link :to="{ name: 'user2', params: {} }" exact>链接</router-link>

这时，在浏览器地址栏，会显示成：

http://localhost:8080/user/user2

这两个路由，在配置时候是同级的，显示的时候，渲染的router-view也是同级的。但是在地址栏的语义上，是有从属关系的。这里我们是不是可以得出一个结论：没有以/开头的路径，会被处理成嵌套路径，跟在前一个路径的后面。

更正：
没有以/开头的路径，会被处理成嵌套路径，跟在当前页面的顶级路径后面，而且不能刷新，一刷新就会找不到页面。
这里的当前页面顶级路径是

http://localhost:8080/user/user2

PS：
发现了一个淘宝的拼音bug
前两天研究淘宝购物车的优惠券展示，发现返回的json数据里，优惠券拼音是错误的，?

脚本宝典总结

以上是脚本宝典为你收集整理的关于vue-router嵌套路由全部内容，希望文章能够帮你解决关于vue-router嵌套路由所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。