23 Vue路由传参

最新推荐文章于 2024-04-29 20:03:13 发布

Civitasv

最新推荐文章于 2024-04-29 20:03:13 发布

阅读量127

点赞数

分类专栏： Vue 文章标签： vue url 传参路由

本文链接：https://blog.csdn.net/qq_40996400/article/details/104424288

版权

Vue 专栏收录该内容

36 篇文章 2 订阅

订阅专栏

路由传参

A 第一种方式

首先上一个例子：

<body>
    <div id="app">
        <router-link to="/login?id=5">登录</router-link>
        <router-link to="/regist">注册</router-link>
        <router-view></router-view>
    </div>

    <script>

        var login = {
            template: "<h3>登录组件---{{$route.query.id}}</h3>"
        }

        var register = {
            template: "<h3>注册组件</h3>"
        }

        const router = new VueRouter({
            routes: [
                { path: "/", redirect: "/login" },
                { path: "/login", component: login },
                { path: "/regist", component: register }
            ]
        })
        var vm = new Vue({
            el: "#app",
            data: {

            },
            router: router
        })
    </script>
</body>

我们可以通过$route.query.id获得url中传递的参数，而不需要改变path中的值。

B 第二种方式

例子二：

<body>
    <div id="app">
        <router-link to="/login/5">登录</router-link>
        <router-link to="/regist">注册</router-link>
        <router-view></router-view>
    </div>

    <script>

        var login = {
            template: "<h3>登录组件---{{$route.params.id}}</h3>"
        }

        var register = {
            template: "<h3>注册组件</h3>"
        }

        const router = new VueRouter({
            routes: [
                { path: "/login/:id", component: login },
                { path: "/regist", component: register }
            ]
        })
        var vm = new Vue({
            el: "#app",
            data: {

            },
            router: router
        })
    </script>
</body>