vue路由传值

Vue是一款优秀的前端框架，它在构建单页应用时，不可避免地会遇到路由传值的问题。本篇文章将从多个角度分析Vue路由传值的问题，并为读者提供最佳实践。

路由传值是什么？

在Vue中，路由传值是指通过URL传递参数，实现不同页面之间数据的传递。当用户通过点击链接或手动输入URL时，Vue Router可以通过路由参数（或查询参数）将该页面所需的数据传递给下一个页面。

路由参数的传递

使用路由参数时，参数需要在路由的path中声明，并在组件中通过$router.params来获取。例如：

```javascript

// 路由配置

const router = new VueRouter({

routes: [

{

path: '/user/:id',

component: User

}

]

});

// User组件中获取参数

export default {

name: 'User',

mounted() {

console.log(this.$route.params.id);

}

}

```

此时，若用户访问 /user/001 页面，则控制台输出001。

查询参数的传递

查询参数不在路由的path中声明，而是在路由的query中声明。例如：

```javascript

// 路由配置

const router = new VueRouter({

routes: [

{

path: '/user',

component: User

}

]

});

// User组件中获取参数

export default {

name: 'User',

mounted() {

console.log(this.$route.query.id);

}

}

```

此时，若用户访问 /user?id=001 页面，则控制台输出001。

路由跳转时传值

除了在URL中传递参数外，Vue还提供了一种方式，可以在路由跳转时将参数传递给下一个页面。这种方式有两种实现方式：一是使用params，二是使用query。

使用params传递参数

当使用params进行路由跳转时，可以在$route对象上添加params属性。例如：

```javascript

// 跳转的组件

this.$router.push({

name: 'User',

params: { id: '001' }

});

// 接收参数的组件

export default {

name: 'User',

mounted() {

console.log(this.$route.params.id);

}

}

```

此时，控制台将输出001。

使用query传递参数

当使用query进行路由跳转时，可以在$route对象上添加query属性。例如：

```javascript

// 跳转的组件

this.$router.push({

name: 'User',

query: { id: '001' }

});

// 接收参数的组件

export default {

name: 'User',

mounted() {

console.log(this.$route.query.id);

}

}

```

此时，控制台将输出001。

路由守卫中传递参数

除了在URL中或路由跳转时传递参数外，Vue还提供了一种方式，可以在路由守卫中传递参数。这种方式通常用于登录拦截等场景。例如：

```javascript

// 路由配置

const router = new VueRouter({

routes: [

{

path: '/user',

component: User,

meta: { requireAuth: true }

}

]

});

// 路由守卫

router.beforeEach((to, from, next) => {

// 判断用户是否登录

if (to.meta.requireAuth && !isLogin()) {

// 保存用户从哪个页面跳转过来，并携带参数

next({

path: '/login',

query: { redirect: to.fullPath }

});

} else {

next();

}

});

// Login组件

export default {

name: 'Login',

methods: {

login() {

// 登录成功后，重定向到上一个页面，并携带参数

this.$router.push({

path: this.$route.query.redirect || '/user',

query: { id: '001' }

});

}

}

}

```

此时，当未登录用户访问 /user 页面时，将会被重定向到登录页面。登录成功后，将跳回/user 页面，并携带参数id=001。

本文从路由参数的传递、路由跳转时传值、路由守卫中传递参数三个方面，为读者提供了Vue路由传值的最佳实践。