一、效果

点击about后，新闻和体育属于about的子路由调用的页面

 

 

 

 

 

 

 

知识点说明

路由里使用children属性可以实现路由的嵌套

 

 

 

三、代码结构

注：主要是标红的几个文件

 

 

 

四、代码

重新编写这几个文件中的代码

index.js

//引入路由
import {
	createRouter,
	createWebHistory
} from 'vue-router'
import Home from '../views/Home.vue'

//定义路由
const routes = [{
		path: '/',
		name: 'Home',
		component: Home
	},
	{
		path: '/about',
		name: 'About',
		component: () => import('../views/About.vue'),
		children: [{
				path: '',
				component: () => import('../views/AboutNews.vue')
			},
			{
				path: 'news',
				component: () => import('../views/AboutNews.vue')
			},
			{
				path: 'sport',
				component: () => import('../views/AboutSport.vue')
			}
		]
	}
]

//创建路由
const router = createRouter({
	//createWebHashHistory hash模式路径前面会多一个#号
	history: createWebHistory(process.env.BASE_URL),
	routes
})

//返回了路由
export default router

 

App.vue

<template>
  <div id="nav">
    <router-link to="/"  replace>Home</router-link> |
    <router-link to="/about"  replace>About</router-link> |
<!-- 	<router-link :to="'/about/me/'+userId">我</router-link> -->
	 
  </div>
  <router-view></router-view>
</template>


<script>
 export default {
   name: 'App',
   data() {
     return {
       userId: 'zhangsan' 
     }
   } 
 }
</script>

 
 <style>
  .router-link-active {
    color: #f00; 
  } 
 
 </style>
 

 

Home.vue

<template>
  <div class="home">
	  <p>Home Page</p>
    <img alt="Vue logo" src="../assets/logo.png">
  </div>
</template>

<script>
</script>

 

About.vue

<template>
  <div class="about">
    <h1>about page</h1>
	
	<div>
		<router-link to="/about/news">新闻</router-link>|
		<router-link to="/about/sport">体育</router-link>|
 
		<router-view></router-view>
		
	</div>
	
  </div>
  
</template>

 

AboutNews.vue

<template>
  <div>
    <ul>
      <li>新闻1</li>
      <li>新闻2</li>
      <li>新闻3</li>
      <li>新闻4</li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "AboutNews"
  }
</script>

<style scoped>

</style>

 

AboutSport.vue

 

<template>
  <div>
    <ul>
      <li>体育1</li>
      <li>体育2</li>
      <li>体育3</li>
      <li>体育4</li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "AboutSport"
  }
</script>

<style scoped>

</style>