vue3路由router.push的使用以及问题分析
更新时间：2023年09月13日 15:34:18 作者：Commas.KM
页面跳转有很多方法,本次使用的是 vue-router,但却在使用 router.push 的时候遇到了点麻烦,所以记录下来,希望可以帮助有需要的人
一、前言
页面跳转有很多方法，本次使用的是 vue-router ，但却在使用 router.push 的时候遇到了点麻烦，所以记录下来，希望可以帮助有需要的人。
二、使用方法
首先，我们来了解下 router.push 的使用方法，如下所示：
字符串路径
// 字符串路径
router.push('/users/eduardo')带有路径的对象
// 带有路径的对象
router.push({ path: '/users/eduardo' })带查询参数，结果是 /register?plan=private
// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })带 hash，结果是 /about#team
// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })命名的路由，并加上参数，让路由建立 url
// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })三、问题描述
我使用“命名的路由，并加上参数，让路由建立 url ”的方式进行带参跳转页面
// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })路由定义的JS代码：
const routes = [
{ path: '/other-page', component: () => import('../views/OtherPage.vue') },
];跳转页面的JS代码：
try {
this.$router.push({
name: 'OtherPage', // 目标页面的路由名称
query: {
param1: 'value1',
param2: 'value2'
}
});
} catch (error) {
console.log(`router.push.err=${error}`)
}点击按钮进行页面跳转，结果却失败，表示匹配不上我设置的路由，报错如下：
router.push.err=Error: No match for
{"name":"OtherPage","query":{"param1":"value1","param2":"value2"},"params":{}}四、解决方法
既然是匹配不上，那么会不会是路由对象中没有与之匹配的参数，那我打印一下路由看看
示例代码：
const routes = this.$router.options.routes; console.log(routes) const routeNames = routes.map(route => route.name); console.log(routeNames);
打印结果：
原来路由名字是 undefined ，瞬间知道解决方法，给路由起个名字 name:'OtherPage' ，路由定义的JS代码如下所示：
{ path: '/other-page',name:'OtherPage', component: () => import('../views/OtherPage.vue') },再次点击跳转，完美手工
五、完整代码
路由定义 router.js
import { createRouter, createWebHistory } from 'vue-router';
// NO1 和 NO2 两种写法均可
// import AboutPage from '../views/AboutPage.vue';
// import OtherPage from '../views/OtherPage.vue';
const routes = [
// NO1：
// { path: '/', name: 'AboutPage', component: AboutPage },
// { path: '/', name: 'OtherPage', component: OtherPage},
// NO2：
{ path: '/about', name: 'AboutPage', component: () => import('../views/AboutPage.vue') },
{ path: '/other-page', name: 'OtherPage', component: () => import('../views/OtherPage.vue') },
];
const router = createRouter({
history: createWebHistory(),
routes,
});
// export default router;
export { router, routes } //router是主路由，routes是子路由有跳转按钮的页面 AboutPage.vue
<template>
<div>
<h1>About</h1>
<button @click="jumpToPageWithParam">带参跳转到其它页面</button>
</div>
</template>
<script>
export default {
name: 'AboutPage',
methods: {
async jumpToPageWithParam() {
// const routes = this.$router.options.routes;
// console.log(routes)
// const routeNames = routes.map(route => route.name);
// console.log(routeNames);
try {
this.$router.push({
name: 'OtherPage', // 目标页面的路由名称
query: {
param1: 'value1',
param2: 'value2'
}
});
} catch (error) {
console.log(`router.push.err=${error}`)
}
}
},
};
</script>
<style scoped>
h1 {
color: #42b983;
}
</style>跳转到的页面 OtherPage.vue
<template>
<div>
<h1>接收带参跳转的页面</h1>
</div>
</template>
<script>
export default {
name: 'AboutPage',
mounted() {
// 获取查询参数
const param1 = this.$route.query.param1;
const param2 = this.$route.query.param2;
// 使用参数执行操作
console.log('param1:', param1);
console.log('param2:', param2);
}
};
</script>
<style scoped>
h1 {
color: #42b983;
}
</style>以上就是vue3路由router.push的使用以及问题分析的详细内容，更多关于vue3 router.push的资料请关注脚本之家其它相关文章！
相关文章
本篇文章主要介绍了vue小图标favicon不显示的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
vue过滤器可以在不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理,下面这篇文章主要给大家介绍了关于Vue中过滤器必懂小知识的相关资料,需要的朋友可以参考下2021-10-10
这篇文章主要介绍了elementUI 动态生成几行几列的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
这篇文章主要介绍了Vue实现选择城市功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-05-05
这篇文章主要介绍了使用 webpack 插件自动生成 vue 路由文件的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
这篇文章主要介绍了Vue快速实现通用表单验证的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
两组件间传值，可能包含多种情况，这篇文章主要介绍了vue两组件间值传递 $router.push实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
大家在写系统的时候,会有这样的需求：点击修改后把需要修改的数据放入表单,其中会有下拉单选框、下拉多选框,展示下拉框单选框内的数据只需要将所选id赋值给下拉框绑定的值就可以了,下面给大家分享vue elementUI下拉框值无法选中问题,感兴趣的朋友一起看看吧2024-03-03
本文通过实例代码给大家介绍了Vue实现搜索 和新闻列表功能简单范例，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧2018-03-03
网站页面的响应速度与用户体验息息相关,直接影响到用户是否愿意继续访问你的网站,所以这篇文章主要给大家介绍了关于Vue项目打包、合并及压缩优化网页响应速度的相关资料,需要的朋友可以参考下2021-07-07
最新评论