一、基础概念
Vue Router是Vue.js官方的路由管理器，可以让我们通过组件化的方式构建单页应用，根据不同的路径展示不同的组件。在Vue Router中，我们可以通过props属性将路由参数传递给需要展示的组件。
// example
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/user/:id',
component: User,
props: true // 将路由参数作为props传递给组件
}
]
const router = new VueRouter({
routes
})
const User = {
props: ['id'],
created () {
getUser(this.id)
}
}
二、使用场景
1. 组件内部直接使用
我们可以在组件内部，通过props属性直接接收路由参数并使用。
// example
const User = {
props: ['id'],
created () {
getUser(this.id)
}
}
2. 组件间传递参数
在Vue Router中，我们可以通过props将路由参数传递给需要展示的组件。这样，我们就可以实现组件间传递参数的功能。
// 父组件查看用户信息
// 子组件
{{ user.name }}
原创文章，作者：MRMCL，如若转载，请注明出处：https://www.506064.com/n/373046.html
微信扫一扫 
支付宝扫一扫 