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

在前端开发中&＃xff0c;首页是一个组件&＃xff0c;通过路由可以切换到此URL&＃xff0c;假如在“首页”组件中&＃xff0c;还嵌套着 “登录”和 “注册”两个组件。此时就需要使用到嵌套路由&＃xff08;子路由&＃xff09;。所谓的嵌套路由就是在一个被路由过来的页面下可以继续使用路由&＃xff0c;是路由中的路由。以下就以一个示例说明嵌套路由的使用。
【例】在网站中包含首页和关于两个组件&＃xff0c;登录页面又包含登录和注册两个组件&＃xff0c;进入系统时默认进入首页&＃xff0c;点击登录切换到登录页面&＃xff0c;点击注册切换到注册页面。

1. 新建views文件夹&＃xff0c;并在该文件夹中新建Home.vue、About.vue、login.vue、reg.vue四个文件&＃xff0c;代码如下&＃xff1a;
   about.vue代码如下&＃xff1a;

<template><div>这是关于组件</div>
</template><script>
export default {name: &＃39;about&＃39;
}
</script><style scoped>
</style>


login.vue代码如下&＃xff1a;

<template><div style&＃61;"border:1px solid orange;color:orange;"><h3>登录页面</h3></div>
</template><script>
export default {name: &＃39;login&＃39;
}
</script><style>
</style>


register.vue代码如下&＃xff1a;

<template><div style&＃61;"border:1px solid orange;color:orange;"><p>注册界面&＃xff1a;这是另一个嵌套路由的内容</p><h3>注册界面</h3></div>
</template><script>
export default {name: &＃39;register&＃39;
}
</script><style>
</style>


home.vue组件

<template><div style&＃61;"border:1px solid red;color:red;"><p>这是父路由home对应的组件页面</p><router-link to&＃61;"/home/login">登录</router-link><router-link to&＃61;"/home/register">注册</router-link><p>以下是home下子组件显示内容</p><router-view></router-view></div>
</template><script>
export default {name: &＃39;home&＃39;
}
</script><style>
</style>


在home组件中包括登录和注册两个组件&＃xff0c;注意“router-link to&＃61;”的写法&＃xff0c;一定要加对应的路径。是子组件将要替换的显示位置。

2. 添加路由文件&＃xff1a;在router目录下&＃xff0c;创建index.js文件&＃xff0c;其代码如下

//第一步&＃xff1a;引用vue和vue-router &＃xff0c;Vue.use&＃xff08;VueRouter&＃xff09;
import Vue from &＃39;vue&＃39;
import Router from &＃39;vue-router&＃39;//第二步&＃xff1a;引用定义好的路由组件
import home from &＃39;&＃64;/view/rotuerView/home&＃39;
import login from &＃39;&＃64;/view/rotuerView/login.vue&＃39;
import register from &＃39;&＃64;/view/rotuerView/register.vue&＃39;
import about from &＃39;&＃64;/view/rotuerView/about.vue&＃39;Vue.use(Router)
export default new Router({mode:&＃39;hash&＃39;,routes: [{path: &＃39;/&＃39;, //默认根目录name: &＃39;home&＃39;,component: home,children: [{ //子目录&＃xff0c;注意子目录路径包括父组件路径path: &＃39;/home/login&＃39;,name:&＃39;login&＃39;,component: login,},{path: &＃39;/home/register&＃39;,name: &＃39;register&＃39;,component: register,},],},{path: &＃39;/about&＃39;,name: &＃39;about&＃39;,component: about},]
})


在路由器类中&＃xff0c;home组件被确认为默认打开url&＃xff0c;home子组件的path需要带渲染路径。

3. 通过修改main.js&＃xff0c;将router对象挂载到app下&＃xff0c;代码如下

import Vue from &＃39;vue&＃39;
import App from &＃39;./App&＃39;
import router from &＃39;./router&＃39; //引入router文件new Vue({el: &＃39;#app&＃39;,router, //挂载到vue实例上components: { App },template: &＃39;&＃39;
})


4. 修改app.vue&＃xff0c;在页面中增加连接和路由窗口&＃xff0c;代码如下&＃xff1a;

<template><div id&＃61;"app"><img src&＃61;"./assets/logo.png"><router-link to&＃61;"/">首页</router-link><router-link to&＃61;"about">关于</router-link><router-view></router-view></div>
</template>
<script>export default {name: &＃39;App&＃39;}
</script><style>
</style>


5. 运行&＃xff0c;点击首页、切换登录和注册&＃xff0c;运行结果如下&＃xff1a;