在组件上,不修改routes中的path规则:
<div id="app">
<router-link to="/login?id=10&name=zs">登陆</router-link>
<router-view></router-view>
</div>
<script>
var login={
template:'<p>我是登陆,你的名字是:{{$route.query.name}}</p>',
created:function () {
console.log(this.$route);
console.log(this.$route.query.id);
console.log(this.$route.query.name);
}
}
var rtobj=new VueRouter({
routes:[
{path:'/login',component:login},
]
})
var vm=new Vue({
el:'#app',
router:rtobj,
})
或者在VueRouter实例中修改path的值:
<div id="app">
<router-link to="/reg/10/ls">注册</router-link>
<router-view></router-view>
</div>
<script>
var reg={
template: '<p>我是注册,你要注册的名字是:{{$route.params.name}}</p>',
created:function(){
console.log(this.$route);
console.log(this.$route.params.id);
console.log(this.$route.params.name);
}
}
var rtobj=new VueRouter({
routes:[
{path:'/reg/:id/:name',component:reg},
:id 站位符、表示此处的属性
]
})
var vm=new Vue({
el:'#app',
router:rtobj,
})