vue局部跳轉，實現一個類似選項卡tab功能

1，這是路由部分，父組件和兩個子組件

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

 {
            path:"/father",
            name:'father',
            component:()=>import("@/demo/father"),
            children:[
                {
                    path:"/father/son1",
                    name:'son1',
                    component:()=>import("@/demo/son1"),
                },
                {
                    path:"/father/son2",
                    name:'son2',
                    component:()=>import("@/demo/son2"),
                }
            ]
        },

 

2.兩個子路由的界面里隨便給點東西

<template>
    <div>
        我是son1組件
    </div>
</template>

 

3.父組件里面的寫法

注意：link里的寫法為   ：to = "{name:roouter頁面的pathname值}"

<template>
    <div>
       <p>我是父組件</p>
       <!-- 子路由 -->
       <router-link :to="{name:'son1'}">son1</router-link>
       <router-link :to="{name:'son2'}">son2</router-link>

       <router-view></router-view>
    </div>
</template>