动态路由解析-CSDN博客

本文链接：https://blog.csdn.net/m0_71814235/article/details/127287192

什么是动态路由★★★★

你可以在一个路由中设置多段“路径参数”，对应的值都会设置到$route.params中。

核心代码演示：

当你点击视图层上的 “用户中心”，去访问用户中心组件的时候，我们传递参数给用户中心组件。

当你访问到这个组件的是，在这个组件里，能够接收到你传递过来的值

var User = { template:"<div>用户：{{$route.params.id}}</div>"}
var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //通过/:参数名  的形式传递参数 
        { path: "/user/:id", component: User },
    ]
})

详细代码，如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 访问组件 -->
        <router-link to="/login">登录</router-link>
        <router-link to="/user/狗子/post:520">用户中心</router-link>

        <router-view></router-view>
    </div>
    <template id="login">
        <div>
            <h1>我是login组件</h1>
        </div>
    </template>

    <template id="user">
        <div>
            <h1>我是user组件</h1>
             <h2>接收到 你传递过来的值是：{{$route.params.username}}---{{$route.params.post_id}}</h2>
             <h3>pid 的值是: {{pid}}</h3>
             <h3>用户名是---{{uname}}</h3>
        </div>
    </template>
    
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
    <script>
        // 组件
        var login = {
            template:'#login'
        };
        var user = {
            template:'#user',
            data(){
                return{
                    pid:'',
                    uname:''
                }
            },
            mounted(){
                // 从路由信息对象$route中读取数据
                console.log(this.$route.params);
                this.uname = this.$route.params.username;
                this.pid = this.$route.params.post_id;
            }

        }
        // 创建路由实例
        var myRouter = new VueRouter({
            mode:'history',//模式
            // 配置组件的路由规则
            routes:[
                {
                    path:'/login',
                    component:login
                },
                {
                    // vue-router中，动态路由如何设置？
                    // 动态传参  语法：
                    // 通过/:参数名  的形式传递参数
                    // (1)动态传一个参数
                    // path:'/user',
                    // path:'/user/:username',
                    

                    // (2)动态传多个参数
                    // path:'/user/:username/:id',

                    // (3)动态穿多个参数并且 路径层级 多一些
                    path:'/user/:username/:post_id',
                    component:user
                }
            ]
        });
        // 根组件
        var vm = new Vue({
            // 模板选择器
            el:'#app',
            // 挂载路由
            router:myRouter,
            // 数据中心
            data(){
                return{
                    
                }
            },
            methods:{
                
            }
        })
    </script>
</body>
</html>

预览