-
查询参
-
配置（传参） :to="{name:'login',query:{id:loginid}}"
-
获取（取参） this.$route.query.id
-
路由参数
-
配置（传参） :to="{name:'register',params:{id:registerid} }"
-
配置路由的规则
-
获取 this.$route.params.id
总结：
-
:to传参的属性里 params是和name配对的 query和name或path都可以
-
使用路由参数必须要配置路由规则里面配置好参数名，否则刷新页面参数会丢失
<!DOCTYPE html>
<html>
<head>
<title>路由的跳转</title>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="vue.js"></script>
<!-- 引入路由插件 -->
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript">
var Login={
template:`
<div>我是登录页面
<span>这是我获取到的参数： {{ msg }}</span>
</div>
`,
data(){
return {
msg:''
}
},
created(){
this.msg=this.$route.query.id
}
}
var Restiger={
template:`
<div>我是注册页面
<span>这是我获取到的路由参数：{{ foo }}</span>
</div>
`,
props:['foo']
// data(){
// return {
// restigerfoo:''
// }
// },
// created(){
// this.restigerfoo=this.$route.params.foo
// }
}
//安装路由插件
Vue.use(VueRouter);
//创建路由对象
var router= new VueRouter({
//配置路由对象
routes:[
{path:'/login',name:'login',component:Login},
{path:'/restiger/:foo',name:'restiger',props:true, component:Restiger},
]
})
new Vue({
el:'#app',
router,
template:`
<div>
<router-link :to="{name:'login',query:{id:'123'}}">去登录</router-link>
|
<router-link :to="{name:'restiger',params:{foo:'bar'}}">去注册</router-link>
<button @click='jslink'>js跳转去登录</button>
<router-view :key="$route.fullPath"></router-view>
</div>
`,
data(){
return {}
},
methods:{
//js跳转传参是一样的
jslink(){
this.$router.push({name:'login',query:{id:'456'}})
}
}
})
</script>
</body>
</html>
