Vue路由组件传参

路由组件传参

HTML5 History模式

导航守卫

路由元信息

过度效果

---

路由组件传参

$route对象

$route是路由传参中用来记录vue组件参数的对象
eg:

//router.js
{ 
path:'/main/:id',
component:Main 
}

<router-link to='/main/123'></router-link>

//Main.js
console.log(this.$route.params.id);//123

props传递——布尔模式

如果不想使用this.$route.params.id的方式传递id，那么props是一种传递的方式，只需要在路由配置文件中，把props配置为true。

此时route.params 将会被设置为组件属性，页面中会显示动态的name值

props传递——对象模式

对于普通页面，我们可以在其路由配置中定义props属性并传入一个对象

然后在组件页面中进行设置

props传递——函数模式

适用于需要在属性中对当前的路由进行处理

然后在页面组件中设置props值