vue局部跳转，实现一个类似选项卡tab功能

1，这是路由部分，父组件和两个子组件

注意：子路由path路径要 “/”+“父路径”+“/”+“子路径”

 1  {
 2             path:"/father",
 3             name:'father',
 4             component:()=>import("@/demo/father"),
 5             children:[
 6                 {
 7                     path:"/father/son1",
 8                     name:'son1',
 9                     component:()=>import("@/demo/son1"),
10                 },
11                 {
12                     path:"/father/son2",
13                     name:'son2',
14                     component:()=>import("@/demo/son2"),
15                 }
16             ]
17         },

2.两个子路由的界面里随便给点东西

1 <template>
2     <div>
3         我是son1组件
4     </div>
5 </template>

3.父组件里面的写法

注意：link里的写法为：to = "{name:roouter页面的pathname值}"

 1 <template>
 2     <div>
 3        <p>我是父组件</p>
 4        <!-- 子路由 -->
 5        <router-link :to="{name:'son1'}">son1</router-link>
 6        <router-link :to="{name:'son2'}">son2</router-link>
 7 
 8        <router-view></router-view>
 9     </div>
10 </template>

posted on 2020-04-08 09:21 GGbondMan 阅读(1891) 评论(0) 编辑收藏举报