vue-router--嵌套路由

最新推荐文章于 2024-06-20 15:58:49 发布

春风霓裳

最新推荐文章于 2024-06-20 15:58:49 发布

阅读量112

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_43470725/article/details/125356726

版权

vue 专栏收录该内容

54 篇文章 2 订阅

订阅专栏

$route 是每个独有的
$router是共有的

官网：https://router.vuejs.org/zh/guide/essentials/nested-routes.html
思想：在一个路由组件里面还有路由组件

代码演示：

配置index.js：注意，子路由路径不能加/

// 该文件用于专门创建路由器
import VueRouter from 'vue-router'
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'

// 创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About,
            children:[
                {
                    // 二级路由路径不能加/
                    path:'message',
                    component:Message
                }
            ]
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    // 二级路由路径不能加/
                    path:'news',
                    component:News
                }
            ]
        }
    ]
})

添加子路由组件：message

<template>
    <div class="Message">
        <ul>
        <li>message01</li>
        <li>message02</li>
        <li>message03</li>
        </ul>
    </div>    
</template>

<script>
export default {
    name:'Message',
    data(){
        return{
        }
    },
    methods:{
    }
    
}
</script>

<style scoped>
    .Message{
        background-color: bisque;
    }
</style>

在父路由中使用子路由跳转：

<template>
    <div class="About">
        <h1>About</h1>
        <br>
        <ul>
        <li>
            <router-link active-class="active" to='/about/message'>message</router-link>
        </li>
        </ul>
        <router-view></router-view>

    </div>    
</template>

<script>
export default {
    name:'About',
    data(){
        return{
        }
    },
    methods:{
    }
    
}
</script>

<style scoped>
    .About{
        background-color: bisque;
    }
</style>