vue-router-路由的嵌套使用
嵌套路由是一个很常见的功能
比如在home页面中,希望通过/home/news和Home/message访问一些内容
一个路径映射一个组件,访问者两个路径也会分别渲染这两个组件
路径和组件的关系如下:
实现嵌套路由有两个步骤:
1.创建对应的子组件,并且在路由映射中配置对应的子路由
2.在组件内部使用< router-view >标签
ul>li{消息$}*4 简便写法
先在components组件文件夹中建两个.vue文件
然后在index.js文件中配置路由,首先用懒加载的方法将两个组件导入
const About = () => import('../components/About')
const User = () => import('../components/User')
再进行配置路由:因为实在home路径下的所以配置在home路由映射中,
{
path:'/home',
component:Home,
children:[
{
path:'',
redirect: 'news'
},
{
path:'news',
component: HomeNews
},
{
path:'message',
component: HomeMessage
}
]
},
news组件和message组件实在home页面中展示的,所以在home页面中使用< router-link >和< router-view >进行展示:在router-link中的路径必须是具体的路径,否则会找不到
<template>
<div>
<h2>我是首页</h2>
<p>我是首页内容</p>
<router-link to="/home/news">新闻</router-link>
<router-link to="/home/message">信息</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "Home"
}
</script>
<style scoped>
</style>