使用this.$router 獲取路由組件(一個(gè)對(duì)象).傳遞的參數(shù)在key: query對(duì)應(yīng)的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" >注冊(cè)</router-link>
<router-view></router-view>
</div>
<script>
// 定義組件對(duì)象
// 組件的定義方式,一種是下面這種,另一種是在components里面指定組件名的引用方式創(chuàng)建組件
//但是注意,路由里面的component的值必須是一個(gè)對(duì)象,不能是在vue實(shí)例中引用的組件名,即路由的組件只能用下面這種方式
var login = {
template:"<h1>登錄組件----{{$route.query.id}} ---- {{$route.query.name}}</h1>",
data(){
return {
msg:"123"
}
},
created(){
console.log(this.$route) // this.$route 是一個(gè)對(duì)象,路由傳遞的參數(shù)在query這個(gè)key對(duì)應(yīng)的value里面,這個(gè)value也是一個(gè)字典
console.log(this.$route.query.id)
}
}
var register = {
template:"<h1>注冊(cè)組件</h1>"
}
var router = new VueRouter({
routes:[
// {path:"/",redirect:"/login"},
{path:"/login",component:login},
{path:"/register",component:register}
]
// linkActiveClass:"" // 為顯示的路由組件添加樣式類(lèi)
})
var vm1 = new Vue({
el:"#test",
data:{},
methods:{},
router:router, //綁定組件
components:{}
})
</script>
</body>
</html>
