动态路由

最新推荐文章于 2024-06-01 15:46:07 发布

卡夫卡的baby

最新推荐文章于 2024-06-01 15:46:07 发布

阅读量67

点赞数

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

本文链接：https://blog.csdn.net/weixin_72303943/article/details/131045650

版权

vue.js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

动态路由

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

核心代码演示：

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

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

1、动态传1个参数

 {
                    // vue-router中 动态路由如何设置？
                    // 动态传参 语法：
                    // 通过 /:参数名  的形式传递参数
                    // （1）动态传1个参数
                    // path:'/user/:id',
                    path:'/user/:username',
                    component:user
                }

预览效果：

2、动态传多个参数

                   // vue-router中 动态路由如何设置？
                    // 动态传参 语法：
                    // 通过 /:参数名  的形式传递参数
                    // （1）动态传1个参数
                    // path:'/user/:id',
                    // path:'/user/:username',

                    // （2）动态传多个参数
                    path:'/user/:username/:id',
                    component:user
                }

预览效果：

3、动态传多个参数并且路径的层级多一级

{
                    // vue-router中 动态路由如何设置？
                    // 动态传参 语法：
                    // 通过 /:参数名  的形式传递参数
                    // （1）动态传1个参数
                    // path:'/user/:id',
                    // path:'/user/:username',

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


                    // (3) 动态传多个参数  并且 路径的层级 多一级
                    path:'/user/:username/post/:post_id',
                    component:user
                }

预览效果：

总的代码：

<title>动态路由</title>
</head>
<body>
    <div id="app">
        <!-- 访问组件 -->
        <router-link to="/login">登录</router-link>
        <router-link to="/user/小李子是傻瓜/post/666">用户中心</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>用户名:{{uname}}</h3>
            <h3>pid 的值 是：{{pid}}</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 中读取数据 -- 在脚本里写时 要带this
                console.log(this.$route.params);
                this.pid = this.$route.params.post_id;
                this.uname = this.$route.params.username;
            }
        }

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

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


                    // (3) 动态传多个参数  并且 路径的层级 多一级
                    path:'/user/:username/post/:post_id',
                    component:user
                }
            ]
        })


        // 根组件
        var a = new Vue({
            // 模板选择器
            el:'#app',

            // 挂载路由
            router:myRouter,

            // 数据中心
            data(){
                return {

                }
            },
            // 方法中心
            methods:{

            }
        })
    </script>
   
</body>
</html>