“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3天，点击查看活动详情”
一、首先在写路由的文件添加children属性,记住children里还要添加name属性,具体代码如下
{
path: 'menu',
title: '菜单栏',
redirect: {name: 'menu1'},
isHide: 1,
component: () => import('./menu.vue'),
children: [{
path: '/',
title: '菜单1',
name: 'menu1',
component: () => import('./menu1.vue'),
}, {
path: 'menu2',
title: '菜单2',
name: 'menu2',
component: () => import('./menu2.vue'),
},
, {
path: 'menu3',
title: '菜单3',
name: 'menu3',
component: () => import('./menu3.vue'),
}]
PS:redirect这个属性,就是默认渲染哪个子路由,你看咱们有两个子路由是吧,例子里redirect的值写的是{name: 'menu1'},如果你写menu2或者menu3,那就默认看到的是menu2或者menu3那个页面
二、接下来就是加router-link,在你父亲的那个页面里,也就是父路由的那个页面menu.vue,具体代码如下:
<router-link :to="{name: 'menu1'}"
tag="button">菜单1</router-link>
<router-link :to="{name: 'menu2'}"
tag="button">菜单2</router-link>
<router-link :to="{name: 'menu3'}"
tag="button">菜单3</router-link>
<router-view></router-view>
PS: 这个时候,你打开父亲路由就能看到页面有三个按钮,下面是对应的内容,点击就可以进行子路由的切换了
三、那我们路由跳转会涉及到传参的问题,如果要传参数,可以在to的时候,用query传,这种方式不用改变之前写的path
<router-link :to="{name: 'resPackage', query:{id:this.user.id, telephone: this.user.user_telephone}}"
tag="button">菜单1</router-link>
PS:然后在需要接收参数的地方,用this.$route.query来获取具体的参数值,具体代码如下:
this.contentId = this.$route.query.id
this.userTel = this.$route.query.telephone
以上就是router-link的简单使用,我的举例只是最简单的一个demo,大家根据自己的需求自行修改即可,具体内容我也是用最通俗易懂的方式来讲解了,有不清楚的,可以评论,大家一起讨论讨论。
最后,祝大家发大财~
