Vue使用routerLinke定义参数的时候 路由规则中不需要更改任何属性。
路由其实就是我们在html中定义的锚点，点击这个连接跳转一个锚点。vue中的路由也是这个原理，
前提是路由必须创建在实例之前。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<script src="./lib/vue-router-3.0.1.js"></script>
</head>
<body> <div class="app">
<h1>{{msg}}</h1>
<!-- 如果在路由中，使用 查询字符串，给路由传递参数，则 不需要修改 路由规则的 path 属性 -->
<router-link to="log?user=duwei&pass=123456">登录</router-link>
<router-link to="zhuce">注册</router-link>
<router-view></router-view>
</div> <script> var log={
template:'<h1>登录界面------{{$route.query.user}}</h1>',
created() {
// 组件的生命周期钩子函数
// console.log(this.$route)
// console.log(this.$route.query.id)
// 这里的this指向的是vm实例对象
console.log(this.$route.query.user); },
} var zhuce={
template:"<h1>注册界面</h1>"
} var router= new VueRouter({
routes:[
{path:"/log",component:log},
{path:"/zhuce",component:zhuce},
{path:'/',redirect:'/zhuce'} //当进入界面的时候，默认显示注册界面，redirect 是string类型的
],
}) var vm=new Vue({
el:'.app',
data:{
msg:'sdfsdfsdf'
},
router:router
}) </script> </body>
</html>
路由规则中定义参数2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<script src="./lib/vue-router-3.0.1.js"></script>
</head>
<body> <div class="app">
<h1>{{msg}}</h1>
<!-- 如果在路由中，参数传递值的时候，需要修改path中的属性值 -->
<router-link to="/log/duwei/123456">登录</router-link>
<router-link to="/zhuce">注册</router-link>
<router-view></router-view>
</div> <script> var log={
template:'<h1>登录界面------{{$route.params.user}}----{{$route.params.id}}</h1>',
created() {
// 组件的生命周期钩子函数
// console.log(this.$route)
// console.log(this.$route.query.id)
// 这里的this指向的是vm实例对象
console.log(this.$route.params.user); },
} var zhuce={
template:"<h1>注册界面</h1>"
} var router= new VueRouter({
routes:[
// /:user和/:pass 相当与占位符
{path:"/log/:user/:id",component:log},
{path:"/zhuce",component:zhuce},
{path:'/',redirect:'/zhuce'} //当进入界面的时候，默认显示注册界面，redirect 是string类型的
],
}) var vm=new Vue({
el:'.app',
data:{
msg:'sdfsdfsdf'
},
router:router
})
