嵌套路由（子路由）——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=”的写法，一定要加对应的路径。是子组件将要替换的显示位置。

2. 添加路由文件：在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需要带渲染路径。

3. 通过修改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/>'
})

4. 修改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>

5. 运行，点击首页、切换登录和注册，运行结果如下：