这次给大家带来怎样使用vue嵌套路由，使用vue嵌套路由的注意事项有哪些，下面就是实战案例，一起来看一下。
第一部分： vue嵌套路由
嵌套路由是什么？
嵌套路由就是在一个被路由过来的页面下可以继续使用路由，嵌套也就是路由中的路由的意思。 比如在vue中，我们如果不使用嵌套路由，那么只有一个，但是如果使用，那么在一个组件中就还有，这也就构成了嵌套。
为什么要使用嵌套路由？
就比如在一个页面中， 在页面的上半部分，有三个按钮，而下半部分是根据点击不同的按钮来显示不同的内容，那么我们就可以在这个组件中的下半部分看成是一个嵌套路由，也就是说在这个组件的下面需要再来一个， 当我点击不同的按钮时，他们的router-link分别所指向的组件就会被渲染到这个中。
官网是怎么介绍的？
每次说到官网，就要说一说百度，百度搜索千万别用。。
要说官网举得这个图，本意是好的，但是描述起来累赘太多。吐个槽。。
这就是实际生活中的一个很好的应用界面， 通常是由多层嵌套的组件组合而成。 同样的， URL中各段动态路径也按照某种结构对应嵌套的各层组件。如上所示。
即user表示用户页， 而user就可以看成是vue中的一个单页面，对于一个user，一定要有哪一个用户，这里的foo（小明、小红）就代表了一个用户，这里的profile可以理解为个人主页，这里的posts可以理解为这个人所发表的文章， 而title可能是不变的，比如无论切换到这个人发表的文章，还是切换到这个人的个人主页，我们都希望在最上方显示同样的东西，而在切换的时候换的就是下面的部分，这个部分我们就可以用来写，那么，这，就是嵌套路由。
借助vue-router，使用嵌套路由配置，就可以很简单的表达这种关系。
登录后复制
const User = { template: `
User {{ $route.params.id }}
}const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, children: [ { // 当 /user/:id/profile 匹配成功， // UserProfile 会被渲染在 User 的 中 path: 'profile', component: UserProfile }, { // 当 /user/:id/posts 匹配成功 // UserPosts 会被渲染在 User 的 中 path: 'posts', component: UserPosts }， // 当 /user/:id 匹配成功， // UserHome 会被渲染在 User 的 中 { path: '', component: UserHome }, // ...其他子路由 ] } ]})
登录后复制
OK！ 这大致就是嵌套路由了！ 其中，第一段代码是在文件中放了， 这是最顶层的出口，渲染高级路由匹配到的组件。
从路由配置中，我们可以看到： 当路径是 /user/小明 或者 /user/小红 时， 就会把User渲染到页面中，这个渲染的就是顶级路由。 （:id就是小明、小红，）。 然后这个页面中就有一个嵌套路由，当然，如果url就是 /user/小明的话，那么这个二级路由是什么都不会显示的， 如果我们希望即使只是 /user/小明， 也得渲染点什么，那么我们就可以设置 path: “” 所对应的路由，这样，即使 /user/小明 也是可以显示更多的了。
如果我们想看小明的个人主页，就是 /user/小明/profile 这时就会把 UserProfile 组件渲染到这个二级路由中了。
如果我们想看小明发表的文章，就是 /user/小明/posts 这时就会把 UserPost 组件渲染到这个二级路由中， 这也就是二级路由了。
其实概念就这么多，是不是很简单呢！
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
如何使用vue注册组件
H5中data-*属性使用方法汇总
以上就是vue嵌套路由与404重定向实现方法分析_vue.js的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2758740.html
