开发者学堂课程【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实例，得到ViewModelvar Vim=new Vue ({el:’#app’,data: {) ，methods:{},//router: routerRouter
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进行传递
