vue 路由的使用包含两种方式: 编程式 和 声明式
编程式有三种方案:
使用场景:点击父组件的 li 元素跳转到子组件,并携带参数,便于子组件获取数据。
路由的配置包含三个方面:name表示路径的别名,path用于指定跳转路径,component表示子组件,即跳转的页面,这里的子组件需要使用import导入后使用。一般路由的配置定义在index.js页面中。
同时在该配置中还包含了:children用于定义嵌套的路由,redirect用于重定向页面,通常用于给定默认页面。等等。
父组件中:
<li v-for="article in articles" @click="getDescribe(article.id)">
方案一:
getDescribe(id) {
//直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/describe/${id}`,
})
}
需要对应路由配置如下:
{
path: '/describe/:id',
name: 'Describe',
component: Describe
}
子组件中获取参数的方式:
this.$route.params.id
方案二:
父组件中:通过路由属性中的name来确定匹配的路由,通过params来传递参数
this.$router.push({
name: 'Describe',
params: {
id: id
}
})
对应路由中的配置: 这里可以添加:/id 也可以不添加,添加数据会在url后面显示,不添加数据就不会显示
{
path: '/describe',
name: 'Describe',
component: Describe
}
子组件中获取参数的方式:
this.$route.params.id
方案三:
父组件:使用path来匹配路由,然后通过query来传递参数,这种情况下 query 传递的参数会显示在url后面?id=?
this.$router.push({
path: '/describe',
query: {
id: id
}
})
对应的路由配置:
{
path: '/describe',
name: 'Describe',
component: Describe
}
对应子组件获取参数的方式:
this.$route.query.id
总结:
js方法跳转路由:
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
声明式有两种传值方式:
使用params方式传值:
<router-link :to="`/menu2/subMenu3/${student.id}`">{{student.name}}</router-link>
路由中的配置:
{
path:'/menu2',
component:Menu2,
children:[
{
path:'subMenu3/:id',
component:SubMenu3
}
]
},
在组件中取值:
$route.params.id
使用query方式传值:
<router-link :to="`/menu2/subMenu3?id=${student.id}`">{{student.name}}</router-link>
路由中的配置,只需要去掉路径末尾的:id:
{
path:'/menu2',
component:Menu2,
children:[
{
path:'subMenu3',
component:SubMenu3
}
]
},
在组件中取值:
$route.query.id
注意:
如果所需要传递的值是一个对象
我们可以这样传值:
<li><router-link v-bind:to="{path:'/word/router2',query:{id:123}}">路由2</router-link></li>
其中的query可以添加多个参数,用逗号隔开,值123可以使用变量替换,其中的path也可以使用name进行替换,只需要在路由的配置中对应就行
路由中配置如下:
{
path: '/word/router2',
name: 'router2',
component: router2
}
子组件取值方式:
this.$route.query
这里的取值包含了传递的整个对象,也可以在该对象后面继续添加属性,如this.$route.query.id从而获取该对象的某个属性值。