【Vue】路由Router传参的两种方式（详解）

最新推荐文章于 2025-04-13 11:17:08 发布

心。晴

最新推荐文章于 2025-04-13 11:17:08 发布

阅读量1.9k

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/jingjing217/article/details/108376281

版权

本文详细介绍了Vue中两种路由传参的方法，包括通过查询字符串和路径参数的方式，并演示了如何在组件中通过$route.query和$route.params对象获取传递的参数。

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

本文我们来介绍一下Vue中的 路由传参 问题，首先我们来准备一个基本路由的页面，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.3/vue-router.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- router-link 默认渲染为一个a 标签 -->
        <router-link to="/login" >登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
    </div>
    <script>
        // 创建两个子组件 模板对象
        var login = {
            template: "<h3>登录模块</h3>"
        }
        var register = {
            template: "<h3>注册模块</h3>"
        }
        // 创建路由对象
        var routerObj = new VueRouter({
            // 配置路由规则
            routes:[
                {path:"/",redirect:"/login"},
                {path: "/login" , component: login},
                {path: "/register" , component: register}
            ]
        })
        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {},
            router:routerObj
        })
    </script>
</body>
</html>