本文我们来介绍一下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>实现路由传参的第一种方式是在 router-link 的 to 跳转地址后拼接，如下：
那么怎么获取链接地址中拼接的数据呢？往下看：
通过工具调试，我们发现传递的数据实际保存在了 $route.query 对象中，那么我们就可以通过此对象来获取了。
第二种方式同样是修改 router-link 中的 to 属性中的地址信息，只是写法和前面不一样，如下：
这时我们需要在路由规则中特殊设置下对应关系，如下：
这时我们在看下传递的数据真实的存储位置：
这时我们发现数据存储在了 $route.params 对象中，那么我们获取传递数据的方式为如下：
