使用this.$router 获取路由组件(一个对象).传递的参数在key: query对应的value值里面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../util/vue-2.4.0.js"></script>
<script src="../util/vue-router-3.0.1.js"></script>
</head>
<body>
<div id="test">
<router-link to="/login?id=10&name=nick" tag="p">登录</router-link>
<router-link to="/register" >注册</router-link>
<router-view></router-view>
</div>
<script>
// 定义组件对象
// 组件的定义方式,一种是下面这种,另一种是在components里面指定组件名的引用方式创建组件
//但是注意,路由里面的component的值必须是一个对象,不能是在vue实例中引用的组件名,即路由的组件只能用下面这种方式
var login = {
template:"<h1>登录组件----{{$route.query.id}} ---- {{$route.query.name}}</h1>",
data(){
return {
msg:"123"
}
},
created(){
console.log(this.$route) // this.$route 是一个对象,路由传递的参数在query这个key对应的value里面,这个value也是一个字典
console.log(this.$route.query.id)
}
}
var register = {
template:"<h1>注册组件</h1>"
}
var router = new VueRouter({
routes:[
// {path:"/",redirect:"/login"},
{path:"/login",component:login},
{path:"/register",component:register}
]
// linkActiveClass:"" // 为显示的路由组件添加样式类
})
var vm1 = new Vue({
el:"#test",
data:{},
methods:{},
router:router, //绑定组件
components:{}
})
</script>
</body>
</html>
