Vue路由 router-动态路由匹配及嵌套路由 leve2_动态路由正则匹配-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42390302/article/details/108874404

本文详细介绍了Vue中的动态路由匹配，包括基本用法、高级匹配模式和匹配优先级。同时，阐述了嵌套路由的概念，展示了如何创建多层嵌套的组件，并实现点击菜单切换内容的功能。最后预告了接下来将要讲解的编程式导航。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue路由 router-动态路由匹配及嵌套路由 leve2

动态路由匹配(dynamac-router)：

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染

该例子为路由动态匹配：部分解释我都写在注释中了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style>
        .active{
            font-weight: 600;
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 因为这里/position/35（这里的35也就是id） 跟/positon前面都有个/position 所以我们都需要加上精确匹配 exact-->
        <router-link tag="li" to="/position/35"  exact active-class="active">前端研发</router-link>
        <router-link tag="li" to="/position/35/city/10"  exact active-class="active">前端研发2</router-link>
        <router-link tag="li" to="/position" exact active-class="active">职位</router-link>
        <router-link tag="li" to="/search" active-class="active">搜索</router-link>
        <router-view></router-view>
    </div>
    <script>
        const position = {
            template:`
                <div>position</div>
            `
        }
        const search = {
            template:`
                <div>search</div>
            `
        }
        /* 这里配置我们的路由 */
        let router = new VueRouter({
            // mode:'hash',默认值
            //路由匹配一般会按顺序从上往下匹配
            routes:[
                {
                    path:'/position',
                    component:position
                },
                {
                    path:'/position/:id',//一个动态参数匹配示例
                    // 我们也可以直接在这里写一个组件
                    component:{
                        // 这里注意只取一个route后面没有s
                        template:`
                            <div>position detail {{$route.params.id}}</div>
                        `
                    }
                },
                {
                    path:'/position/:id/city/:cid',//两个及多个参数匹配示例，我们可以根据需要从 $route.params中取
                    component:{
                        template:`
                            <div>position detail {{$route.params}}</div>
                        `
                    }
                },
                {
                    path:'/search',
                    component:search
                },
                {
                    path:'*',//匹配一个404页,就是上面路由均匹配不到时
                    component:{
                        template:`
                            <h1>404 page not found!</h1>
                        `
                    }
                }
            ]
        })

        let vm = new Vue({
            // router:router, key value 一样 我们可以简写成 router如下
            router,
            el:'#app'
        })
    </script>
</body>
</html>

高级匹配模式：其实可以理解为我们在匹配路由时可以编写一些正则表达式来进行路由筛选。

匹配优先级：匹配的优先级就按路由的定义顺序：谁先定义的，谁的优先级就最高。

嵌套路由（nest-router）：

通常由多层嵌套的组件组合而成

我们想实现的效果如下，点击一级菜单切换相应内容，点击二级菜单时也显示相应内容，并且不影响一级菜单。如下图：

在这里插入图片描述

代码在这：你想知道的我都写在注释里面啦，方便大家阅读！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/node_modules/vue/dist/vue.js"></script>
    <script src="/node_modules/vue-router/dist/vue-router.js"></script>
    <style>
        .active{
            font-weight: 600;
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <router-link tag="li" to="/position" active-class="active">一级菜单1</router-link>
        <router-link tag="li" to="/search" active-class="active">一级菜单2</router-link>
        <router-view></router-view>
    </div>
    <script>
        const position = {
            template:`
                <div>
                    <router-link to="/position/first" active-class="active">二级菜单1</router-link>
                    <router-link to="/position/second" active-class="active">二级菜单2</router-link>
                    <router-view></router-view>
                </div>
            `
        }
        const search = {
            template:`
                <div>search</div>
            `
        }
        /* 这里配置我们的路由 */
        let router = new VueRouter({
            // mode:'hash',默认值
            //路由匹配一般会按顺序从上往下匹配
            routes:[
                {//这里也可以配置一下
                    path:'/',
                    redirect:'/position/second',
                },
                {
                    path:'/position',
                    component:position,
                    //配置默认打开路径
                    redirect:'/position/second',
                    // 在这里配置嵌套路由 可能有多个 所以用数组
                    // 可以配置相对路径 也可以配置绝对路径
                    children:[
                        //相对于/position的相对路径
                        {
                            path:'first',
                            component:{
                                template:'<div>first</div>'
                            }
                        },
                        {
                            path:'second',
                            component:{
                                template:'<div>second</div>'
                            }
                        },
                        //相对于/position的绝对路径
                        // {
                        //     path:'/position/first',
                        //     component:{
                        //         template:'<div>first</div>'
                        //     }
                        // },
                        // {
                        //     path:'/position/second',
                        //     component:{
                        //         template:'<div>second</div>'
                        //     }
                        // },
                    ]
                },
                {
                    path:'/search',
                    component:search
                },
                {
                    path:'*',//匹配一个404页,就是上面路由均匹配不到时
                    component:{
                        template:`
                            <h1>404 page not found!</h1>
                        `
                    }
                }
            ]
        })

        let vm = new Vue({
            // router:router, key value 一样 我们可以简写成 router如下
            router,
            el:'#app'
        })
    </script>
</body>
</html>