this.$route.query.redirect里的query可不可以用params,为什么
时间: 2023-06-26 12:05:07 浏览: 85
在Vue.js中,路由参数有两种类型:params和query。它们的区别在于:
- params是在URL路径中定义的,例如`/users/:id`,其中`:id`是一个参数,它可以通过`this.$route.params.id`来获取。
- query是在URL查询字符串中定义的,例如`/users?id=123`,其中`id`是一个参数,它可以通过`this.$route.query.id`来获取。
因此,在`this.$route.query.redirect`中,`redirect`是一个查询参数,而不是路径参数,因此我们需要使用`this.$route.query`来获取它。如果我们想要使用路径参数,我们需要在路由定义中使用`params`关键字来定义它。
相关问题
router.beforeEach((to, from, next) => { if (store.getters.getRouters == null) { // 获取菜单和路由 getMenusApi(params).then((res) => { if (res.data.length === 0) { window.location.href = process.env.VUE_APP_API_BASE_CONSOLE || '' } const { data } = res const menuNav = [] const childrenNav = [] // 后端数据, 根级树数组, 根级 PID listToTree(data, childrenNav, 0) menuNav.push(...childrenNav) const routers = generator(menuNav, null) routers.forEach((r) => { router.addRoute(r) }) router.addRoute(page404) store.commit('SET_ROUTERS', routers[0].children) // 请求带有 redirect 重定向时,登录自动重定向到该地址 const redirect = decodeURIComponent(from.query.redirect || to.path) if (to.path === redirect) { // set the replace: true so the navigation will not leave a history record next({ ...to, replace: true }) } else { // 跳转到目的路由 next({ path: redirect }) } }).catch((error) => { console.log(error,'error') if (error.data.code !== 200 || error.data.data.length === 0) { setTimeout(function () { window.location.href = process.env.VUE_APP_API_BASE_CONSOLE || '' }, 5) } }) // // 获取按钮权限 // getPermissionApi(params).then((res: any) => { // if (res.data.code !== 200) return ElMessage.error(res.data.message) // store.commit('SET_PERMISSION', res.data.data) // }) // // 获取数据权限 // getRolesApi(params).then((res: any) => { // if (res.data.code !== 200) return ElMessage.error(res.data.message) // store.commit('SET_ROLES', res.data.data) // }) // // 获取用户信息 // getUserInfoApi().then((res: any) => { // if (res.data.code !== 200) return ElMessage.error(res.data.message) // store.commit('SET_USERS', res.data.data) // }) } else { next() } })
这是一个 Vue 路由守卫的代码片段,用于在路由切换前进行一些操作。其中包含了以下主要逻辑:
1. 判断 store 中的路由信息是否为空,如果为空则向后端发起请求获取菜单和路由信息。
2. 通过 getMenusApi 函数向后端发起请求,获取菜单和路由信息。如果请求成功,则将获取到的菜单和路由信息转换为前端路由,并添加到 Vue Router 中。
3. 如果请求带有 redirect 重定向参数,则自动跳转到该地址。
4. 如果 store 中已经有路由信息,则直接跳转到目的路由。
5. 如果获取菜单和路由信息失败,则跳转到 404 页面或者登录页面。
注释中的代码是一些额外的逻辑,用于获取用户信息、按钮权限、数据权限等。
uniapp路由传参数组
在uni-app中,可以通过路由传递参数给目标页面。有几种方式可以实现参数传递的组合。
1. Query 参数传递:可以通过在路由中添加 query 参数来传递参数。在跳转时可以使用 `uni.navigateTo` 或 `uni.redirectTo` 方法,并在 URL 后面拼接参数。在目标页面中,可以使用 `this.$route.query` 获取传递的参数。
示例:
```javascript
// 跳转时传递参数
uni.navigateTo({
url: '/pages/targetPage?param1=value1¶m2=value2'
});
// 目标页面中获取参数
onLoad() {
console.log(this.$route.query.param1); // 输出:value1
console.log(this.$route.query.param2); // 输出:value2
}
```
2. Params 参数传递:可以通过在路由中添加 params 参数来传递参数。在跳转时可以使用 `uni.navigateTo` 或 `uni.redirectTo` 方法,并在 URL 中以占位符的形式指定参数。在目标页面中,可以使用 `this.$route.params` 获取传递的参数。
示例:
```javascript
// 跳转时传递参数
uni.navigateTo({
url: '/pages/targetPage/param1/value1/param2/value2'
});
// 目标页面中获取参数
onLoad() {
console.log(this.$route.params.param1); // 输出:value1
console.log(this.$route.params.param2); // 输出:value2
}
```
3. Vuex 状态管理传递:如果要在多个页面之间传递参数,并且希望参数在整个应用中共享,可以使用 Vuex 进行状态管理。在发送页面中将参数存储到 Vuex 中,在接收页面中从 Vuex 中获取参数。
示例:
```javascript
// 发送页面
this.$store.commit('SET_PARAM', { param1: 'value1', param2: 'value2' });
// 接收页面
onLoad() {
console.log(this.$store.state.param1); // 输出:value1
console.log(this.$store.state.param2); // 输出:value2
}
```
以上是uni-app中路由传递参数的几种方式,你可以根据具体情况选择适合的方式来传递参数。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)