1.通过query获取参数
- 创建路由对象,将路由对象注册到Vue实例中去
var 页面模板对象={template:'<p>第一个</p>'}
var router=new VueRouter({
routes:[
{path:'/监听的路由链接地址',component:页面模板对象}
]
})
var vm=new Vue({
el:'#app',
data:{},
methods:{},
router:router
})
- 在页面上添加router-view和router-link标签,并传参
<div id="app">
<router-link to="/监听的路由链接地址?id=1">aaa</router-link>
//可以用&连接多个参数
<router-view></router-view>
</div>
- 获取传递过来的参数
vue-router会将传递过来的参数放入一个route对象中,这种自带的对象可以通$route进行访问,而传参会被存储在$route下的query对象中,作为query对象的属性存放
这个传递过来的参数,只有接收的组件下的router才有
var 页面模板对象={
//可以直接将参数写入标签中,利用插值表达式
template:'<p>第一个---{{$route.query.id}}</p>',
//也可以在方法中调用
created(){
console.log(this.$route.query.id)
}
}
2.通过params获取参数
- 创建路由对象,将路由对象注册到Vue实例中去
var 页面模板对象={template:'<p>第一个</p>'}
var router=new VueRouter({
routes:[
//!!!!注意这里有所不同
//需要多少个参数,都要提前设置一个占位符
//vue-router会自动将地址后面的数据解析成一个参数
{path:'/监听的路由链接地址/:id',component:页面模板对象}
]
})
var vm=new Vue({
el:'#app',
data:{},
methods:{},
router:router
})
- 在页面上添加router-view和router-link标签,并传参
<div id="app">
<!--直接写数字或字符串即可-->
<router-link to="/监听的路由链接地址/10">aaa</router-link>
//可以用/连接多个参数
<router-view></router-view>
</div>
- 获取传递过来的参数
var 页面模板对象={
//可以直接将参数写入标签中,利用插值表达式
template:'<p>第一个---{{$route.params.id}}</p>',
//也可以在方法中调用
created(){
console.log(this.$route.params.id)
}
}
总结:
第一种方式不需要提前定义占位符,可以直接使用,比较方便,而且就算没有传参,也可以使用路由
第二种方式需要提前定义占位符,不能直接使用,传递参数时比较方便,路径中的参数也不容易暴露信息