<vue 路由 4、嵌套路由>

 

一、效果

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

 

 

 

 

 

 

 

知识点说明

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

 

 

 

三、代码结构

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

 

 

 

四、代码

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

index.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

//引入路由 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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<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

?

1 2 3 4 5 6 7 8 9

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

 

About.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<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

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<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>