嵌套路由
1、嵌套路由,简单理解,就是在一个路由组件中定义另一个路由
2、实现案例截图
3、实现思路
(1)搭建好一个主路由,主要是配置好了相关的一些配置。具体案例实现如:进入请点击
(2)定义路由组件;
(3)注册路由;
(4)使用路由;
4、实现过程
(1)先按照案例配置好相关配置,过程如:进入请点击;
(2)在目录src\views\Home下,定义相关路由组件 News.vue 和 Message.vue
News.vue
<template>
<div>
<ul>
<li v-for="(news, index) in newsArr" :key="index">{{news}}</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
newsArr: ['news001', 'news002', 'news003', 'news004']
}
}
}
</script>
<style>
</style>
Message.vue
<template>
<div>
<ul>
<li v-for="(message, index) in messages" :key="index">
<a href="???">{{message.title}}</a>
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
messages: []
}
},
mounted () {
//模拟ajax请求从后台获取数据
setTimeout(() => {
const messages = [
{
id: 1,
title: 'message001'
},
{
id: 3,
title: 'message003'
},
{
id: 5,
title: 'message005'
}
]
this.messages = messages
}, 1000)
}
}
</script>
<style>
</style>
(3)注册路由
在文件src\router\index.js中,添加嵌套路由的相关信息
代码如下:
/* 路由器模块 */
import Vue from 'vue'
import VueRouter from 'vue-router'
/* 引入路由组件 */
import About from '../views/About.vue'
import Home from '../views/Home.vue'
import News from '../views/Home/News.vue'
import Message from '../views/Home/Message.vue'
Vue.use(VueRouter)
export default new VueRouter({
/*n个路由 */
routes: [
{
path: '/about',
component: About
},
{
path: '/home',
component: Home,
children: [
{
// path: '/news', //path最左侧的/永远代表根路由,这样写不对
path: '/home/news', //第一种写法,推荐
component: News
},
{
path: 'message', //第二种写法,简化写法
component: Message
},
{
path: '',
redirect: '/home/news'
}
]
},
/*当访问 ‘ http://localhost:8090/ ’时,重定向到about页面*/
{
path: '/',
redirect: '/about'
}
]
})
(4)使用路由
在文件src\views\Home.vue下,使用路由
<template>
<div>
<h2>Home</h2>
<div>
<ul class="nav nav-tabs">
<li>
<router-link to="/home/news">News</router-link>
</li>
<li>
<router-link to="/home/message">Message</router-link>
</li>
</ul>
<div>
<router-view></router-view>
<hr/>
</div>
</div>
</div>
</template>
<script>
export default {}
</script>
<style>
</style>
(5)在终端运行命令 npm run dev , 开启访问即可