本文共 1322 字，大约阅读时间需要 4 分钟。

该文章的项目是我的上篇文章的项目，上篇博客地址：

1 什么是嵌套路由

嵌套路由就是路由中的路由，路径的子路径，如图中/user/foo下有两个profile、posts子路由。

/user/foo/profile                     /user/foo/posts+------------------+                  +-----------------+| User             |                  | User            || +--------------+ |                  | +-------------+ || | Profile      | |  +------------>  | | Posts       | || |              | |                  | |             | || +--------------+ |                  | +-------------+ |+------------------+                  +-----------------+

2 创建路由页面

在src/components下创建address.vue

在src/components下创建postman.vue

3 修改路由配置

引入上面写的页面文件

import address from '@/components/address'import postman from '@/components/postman'

修改router.js中about路由内容

{
          path: '/about',        name: 'about',       component: About,      children:[        {
    path: 'address', name: 'address', component: address },        {
    path: 'postman', name: 'postman', component: postman }      ]    },

子路由中的路径(path)需要是相对路径，所以不能在路径前面加"/"。

4 修改父页面

修改about.vue文件

5 成果

启动项目，在浏览器中打开，点击“关于”（注意浏览器地址栏变化）

记得给博主点赞哦！纯手打

相关文章

vue动态路由：

转载地址：http://rrhrz.baihongyu.com/