嵌套路由（子路由）——vue路由（二）

在前端開發中，首頁是一個元件，通過路由可以切換到此URL，假如在“首頁”元件中，還嵌套着 “登入”和 “注冊”兩個元件。此時就需要使用到嵌套路由（子路由）。所謂的嵌套路由就是在一個被路由過來的頁面下可以繼續使用路由，是路由中的路由。以下就以一個示例說明嵌套路由的使用。

【例】在網站中包含首頁和關于兩個元件，登入頁面又包含登入和注冊兩個元件，進入系統時預設進入首頁，點選登入切換到登入頁面，點選注冊切換到注冊頁面。

1. 建立views檔案夾，并在該檔案夾中建立Home.vue、About.vue、login.vue、reg.vue四個檔案，代碼如下：

   about.vue代碼如下：

<template>
 <div>這是關于元件</div>
</template>

<script>
export default {
  name: 'about'
}
</script>

<style scoped>
</style>
           

login.vue代碼如下：

<template>
  <div style="border:1px solid orange;color:orange;">
    <h3>登入頁面</h3>
  </div>
</template>

<script>
export default {
  name: 'login'
}
</script>

<style>
</style>
           

register.vue代碼如下：

<template>
  <div style="border:1px solid orange;color:orange;">
    <p>注冊界面：這是另一個嵌套路由的内容</p>
    <h3>注冊界面</h3>
  </div>
</template>

<script>
export default {
  name: 'register'
}
</script>

<style>
</style>
           

home.vue元件

<template>
  <div style="border:1px solid red;color:red;">
    <p>這是父路由home對應的元件頁面</p>
    <router-link to="/home/login">登入</router-link>
    <router-link to="/home/register">注冊</router-link>
    <p>以下是home下子元件顯示内容</p>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'home'
}
</script>

<style>
</style>
           

在home元件中包括登入和注冊兩個元件，注意“router-link to=”的寫法，一定要加對應的路徑。是子元件将要替換的顯示位置。

1. 添加路由檔案：在router目錄下，建立index.js檔案，其代碼如下

//第一步：引用vue和vue-router ，Vue.use（VueRouter）
import Vue from 'vue'
import Router from 'vue-router'

//第二步：引用定義好的路由元件
import home from '@/view/rotuerView/home'
import login from '@/view/rotuerView/login.vue'
import register from '@/view/rotuerView/register.vue'
import about from '@/view/rotuerView/about.vue'

Vue.use(Router)
export default new Router({
  mode:'hash',
  routes: [{
      path: '/',  //預設根目錄
      name: 'home',
      component: home,
      children: [{   //子目錄，注意子目錄路徑包括父元件路徑
          path: '/home/login',
          name:'login',
          component: login,
        },
        {
          path: '/home/register',
          name: 'register',
          component: register,
        },
      ],
    },
    {
        path: '/about',
        name: 'about',
        component: about
      },
  ]
})
           

在路由器類中，home元件被确認為預設打開url，home子元件的path需要帶渲染路徑。

1. 通過修改main.js，将router對象挂載到app下，代碼如下

import Vue from 'vue'
import App from './App'
import router from './router' //引入router檔案

new Vue({
  el: '#app',
  router,  //挂載到vue執行個體上
  components: { App },
  template: '<App/>'
})
           

1. 修改app.vue，在頁面中增加連接配接和路由視窗，代碼如下：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-link to="/">首頁</router-link>
    <router-link to="about">關于</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
	export default {
		name: 'App'
	}
</script>

<style>
</style>
           

1. 運作，點選首頁、切換登入和注冊，運作結果如下：