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

2019-07-08 19:04:34 阅读：383 来源： 互联网

标签：about Vue postman 嵌套 address path 路由

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

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>

5 成果

启动项目，在浏览器中打开，点击“关于”（注意浏览器地址栏变化）
在这里插入图片描述
点击“地址”

点击“快递员”

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

vue动态路由：动态路由入门教学

标签：about,Vue,postman,嵌套,address,path,路由
来源： https://blog.csdn.net/qq_42120178/article/details/95083011

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9