Vue 嵌套路由（Vue 嵌套路由入门，图文教学）

最新推荐文章于 2024-08-15 22:21:57 发布

Dreamy_Lois

最新推荐文章于 2024-08-15 22:21:57 发布

阅读量2.7k

点赞数 8

分类专栏： vue 文章标签： vue嵌套路由嵌套路由图文教学入门 vue

本文链接：https://blog.csdn.net/qq_42120178/article/details/95083011

版权

vue 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

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

1 什么是嵌套路由

嵌套路由就是路由中的路由，路径的子路径，如图中/user/foo下有两个profile、posts子路由。
嵌套路由有什么用？可以使用相同模版，网页框架不变，只改变一小部分内容

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

2 创建路由页面

在src/components下创建address.vue

<template>
  <div>
    地址：北京市
  </div>
</template>

在src/components下创建postman.vue

<template>
  <div>
    快递员:小章
  </div>
</template>

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文件

<template>
    <div >
        关于我们
        <router-link to="/about/address">地址</router-link>
        <router-link to="/about/postman">快递员</router-link>
        <router-view/>
    </div>
</template>