1.vue router是什么
vue router是vue官方的路由管理器。
路由用于设置访问路径,并且将路径和组件映射起来。
路由模块的本质就是建立url和组件之间的映射。
2.vue router之间的传参
1.$router.push 编程式导航
利用命名路由
在路由设置时,设置name属性
const routes = [
{ path: '/center', name: 'center', component: Center }
]
进行路由跳转时,通过params传值
this.$router.push({ name: 'center', params: { userId: 123 } })
在vue组件中使用 this.$route.params 进行接收
输出效果:
【注】使用命名路由在路由跳转时传值,会出现刷新页面后值丢失的情况
利用查询参数
在进行路由跳转时,利用query传值
this.$router.push({ path: '/centers', query: { userId: 123, name: '小红' } })
在vue组件中使用 this.$route.query 进行接收
输出效果:
【注】query 也可以配合 name 使用,但是 params 不能配合 path 使用
this.$router.push({ name: 'left', params: { username: 123, age: 456 }, query: { userId: 123, name: '小红' } })
2. <router-link> 声明式导航
<router-link>类似于 html中的 <a>标签 ,点击后进行跳转。但不同的是<router-link>是跳转到另一个路由
<router-link :to="{ name: 'right', params: { userId: 222 }, query: { color: 'red' } }">right</router-link>
输出效果:
【注】在刷新页面后,params的值会丢失
3.设置路由匹配时,使用冒号设置
在设置路径时,使用冒号来设置
const routes = [
{ path: '/left/:username/:age', component: Left },
]
【注】进行此设置后,在进行页面刷新后不会丢失params数据。
【注】如果在此基础上使用命名路由,然后用 $router.push传参,则params数据在页面刷新后不会丢失
在url中进行传值
在vue组件中使用 this.$route.params 进行接收
输出效果:
在 url 中通过 ?变量名=参数&变量名=参数 来进行传值
在vue组件中使用 this.$route.query 进行接收
输出效果: