vue3路由router.push的使用以及问题分析
作者: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的资料请关注脚本之家其它相关文章!