使用案例
路由配置:
const routes = [
{
path:'/a',
name:'a',
component:()=>import('@/components/aCom.vue')
},
{
path:'/b',
name:'b',
component:()=>import('@/components/bCom.vue')
}
]
父组件,两个按钮实现组件的跳转,实现路由切换,并传递参数
<template>
<div id="app">
<button @click = 'ToA'>a组件</button>
<button @click = 'ToB'>b组件</button>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
methods:{
ToA(){
this.$router.push({
name:'a',
// path:'/a',
query:{
id:'a'
}
})
},
ToB(){
this.$router.push({
name:'b',
// path:'/b',
query:{
id:'b'
}
})
},
}
}
</script>
query
query传递参数的特点:
- 参数会以url字符串序列的方式拼接到url后面,如 http://localhost:8080/a?id=a ,其中 http://localhost:8080/a 是url,id=a是我们传递过来的参数。
- 可以使用path,也可以使用name
- 参数一定会显示在url中
- 页面刷新后,参数仍然存在
this.$router.push({
name:'a',
// path:'/a',
query:{
id:'a'
}
})
使用this.route.query.id可以获取到我们刚才路由传过来的id
这两个地方的名称必须相同
params
params传参可以分为显示和不显示两种
不显示
特点:
- 参数不会显示在url中,如http://localhost:8080/b
- 可以使用path,也可以使用name
- 页面刷新后,参数不存在
this.$router.push({
// name:'a',
path:'/a',
params:{
id:'a'
}
})
显示
特点:
- routers中的url需要使用占位符,占位路由中的数据位置,以供显示
- 参数不会显示在url中,如http://localhost:8080/b/b
- 可以使用name,不可以使用path
- 页面刷新后,参数仍存在
路由重新设置:
const routes = [
{
path:'/a/:id',
name:'a',
component:()=>import('@/components/aCom.vue')
},
{
path:'/b/:id',
name:'b',
component:()=>import('@/components/bCom.vue')
}
]
编程式路由:
this.$router.push({
name:'a',
params:{
id:'a'
}
})