vue/cli的學習10 二級路由的使用

1:需要在哪個頁面有子頁面顯示 就是在哪個頁面放router-view標籤(本質就是一個動態元件)

2:在components中新建一個mine資料夾 資料夾中新建Login.vue 和Register.vue

<template>
    <div>
        登入
    </div>
</template>

<template>
    <div>
        註冊
    </div>
</template>

 

3:在Mine.vue中設定如下程式碼   router-link就是a標籤    router-view就是路由切換

<template>
    <div class="mine">
        <div class="content">
            <div class="content-item">
                <router-link to="/mine/login">登入</router-link>
                <router-link to="/mine/register">註冊</router-link>
            </div>
            <div>
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

4:修改Mine頁面的路由配置

{
    path: '/mine',
    name: 'mine',
    component:Mine,
    children:[
        {
          path:"",
          name:"login",
          component:()=>import ("../components/mine/Login.vue")
        },
        {
          path:"login",
          name:"login",
          component:()=>import ("../components/mine/Login.vue")
        },
        {
          path:"register",
          name:"register",
          component:()=>import ("../components/mine/Register.vue")
        },
    ]
  },

5:通過位址列或者a標籤就可以切換子路由了