id vue2路由传参_vue路由传参和router使用技巧总结_蓝戒的博客

路由作为单页面应用连接页面的桥梁，而参数在其中扮演着非常重要的角色，在两座之间桥梁是否能够连接成功起着重要作用。

在vue中根据vue-router官网，我们知道vue路由组件传参提供了三种基本的传参方式：布尔模式、对象模式、函数模式；具体查看官网：路由组件传参

了解完了路由组件传参原理以后，接下来我们总结一下路由传参的方法和技巧：

路由传参方案

路由传参方法一：

1. 路由配置

{

path: '/describe/:id',

name: 'Describe',

component: Describe

}

2. 使用方法

// 直接调用$router.push 实现携带参数的跳转url

this.$router.push({

// 这个id是一个变量,随便是什么值都可以

path: /describe/${id}`,

})

3，获取方法(在describe页面)

$route.params.id

使用以上方法可以拿到上个页面传过来的id值

vue路由传参方法二：

1. 路由配置

{

path: '/describe',

name: 'Describe',

component: Describe

}

// 默认配置

2. 使用方法

this.$router.push({

name: