开发者学堂课程【Vue.js 入门与实战：路由传参-使用query方式传递参数】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8197
路由传参-使用query方式传递参数
内容介绍
一、创建组件
二、创建路由规则
三、总结
本节主要学习，如何在路由规则中怎么定义参数。定义参数有两种方式，本节主要讲解传参的第一种方式：
一、创建组件
首先先创建登录和注册的组件，代码如下：
var login = { template: '<h1>登录</h1> ' ｝ var register = { template: '<h1>注册</h1> ' ｝
二、创建路由规则
1. 导入包
<head> <meta charset="Utf-8"> <meta name="viewport" content="width =device -width, initial-scale=1.0"> <meta http- equiv="X-UA-Compatible content="iesedge"> <title>Document</title> <script src =”./1ib/vue-2.4.0.jg"></script> <script src=”./lib/vue-router -3.0.1.js></ script > < /head>
2. 创建路由对象
Var router =new vuerouter({ Routes:[ {path:’/login’, component: login}, {path:’/register’, component: register } ] })
3. 路由对象挂载到 vm 上
//创建Vue实例，得到ViewModel var Vim=new Vue ({ el:’#app’, data: {) ， methods:{}, //router: router Router
4. 展示和切换设置
<router-link to=" /login">登录</ router-link> <router-link to=" /register">注册</' router -link> <router -view></ router-view>
此时浏览，可以切换。
5. 说明
<body> <div id=" app"> <!—如果在路由中使用查询字符串，给路由传递参数，则不需要修改路由规则的path属性的 <router-link to="/login=？id=10&name=zs">登录</router-link> <router-link to="/register">注册<router-link> <router -view></ router-view> </div>
6. 传参
var login={ template: ‘<h1>登录--- {{$route.query.id}} --- {{$route.query.name}} </h1> ’， created（）{//组件的生命周期钩子函数 console.log（this$route） console .log（this.$route.query.id） }
此时右键保存刷新，可以看到 10 以及 zs 这两个参数已经被传递：
三、总结：
1. 好处一：
不需要修改 path 匹配规则
2. 好处二：
可以直接通过 this.$router进行传递
