实现的需求如下(这里只是做简单操作,根据实际情况进行修改):
父组件:HelloFather.vue 不过多阐述样式,这里就是路由跳转和显示
<template>
<div class="navbar">
<router-link to="/HelloSon">一号链接</router-link>
<router-link to="/UserHome">二号链接</router-link>
<!-- 路由匹配到的组件将显示在这里,这里要显示子级的内容哦 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'navbar'
}
</script>
<style scoped></style>
一号链接子组件 HelloSon.vue(一号链接里面还套了一层子组件,等于是爸爸的儿子的儿子)
<template>
<div class="navbar">
<h2>你好,我是一号链接HelloSon</h2>
<router-link to="/HelloSon2">一号链接HelloSon的子级</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'HelloSon'
}
</script>
<style scoped></style>
二号链接 UserHome.vue
<template>
<div>你好,我是UserHome</div>
</template>
<script>
export default {
}
</script>
<style></style>
一号链接的儿子 HelloSon2.vue
<template>
<div>
<h2>我是HelloSon下面的子级HelloSon2呀</h2>
</div>
</template>
<script>
export default {
name: 'HelloSon2'
}
</script>
<style></style>
路由router 下的index.js如何配置
首先初始的第一层应该是这么写的
import Vue from 'vue'
import Router from 'vue-router'
import HelloFather from '@/components/HelloFather'
import HelloSon from '@/components/HelloSon'
import HelloSon2 from '@/components/HelloSon2'
import UserHome from '@/components/UserHome'
import Enterprise from '@/components/Enterprise'
Vue.use(Router)
export default new Router({
routes: [
{
// 默认一进来就是HelloWorld页面
path: '/',
name: 'HelloFather',
component: HelloFather,
children: [
{
path: '/UserHome', component: UserHome },
{
path: '/HelloSon',
component: HelloSon,
children: [
{
path: '/HelloSon2', component: HelloSon2 }
]
}
]
},
{
//这个目前没有做展示
path: '/Enterprise',
name: 'Enterprise',
component: Enterprise
}
]
})
路由跳转 this.$router.push("/");