vue3路由router.push的使用以及問題分析

更新時間：2023年09月13日 15:34:18 作者：Commas.KM

頁面跳轉(zhuǎn)有很多方法,本次使用的是?vue-router,但卻在使用?router.push?的時候遇到了點麻煩,所以記錄下來,希望可以幫助有需要的人

一、前言

頁面跳轉(zhuǎn)有很多方法，本次使用的是 vue-router ，但卻在使用 router.push 的時候遇到了點麻煩，所以記錄下來，希望可以幫助有需要的人。

二、使用方法

首先，我們來了解下 router.push 的使用方法，如下所示：

字符串路徑

// 字符串路徑
router.push('/users/eduardo')

帶有路徑的對象

// 帶有路徑的對象
router.push({ path: '/users/eduardo' })

帶查詢參數(shù)，結(jié)果是 /register?plan=private

// 帶查詢參數(shù)，結(jié)果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

帶 hash，結(jié)果是 /about#team

// 帶 hash，結(jié)果是 /about#team
router.push({ path: '/about', hash: '#team' })

命名的路由，并加上參數(shù)，讓路由建立 url

// 命名的路由，并加上參數(shù)，讓路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

三、問題描述

我使用“命名的路由，并加上參數(shù)，讓路由建立 url ”的方式進行帶參跳轉(zhuǎn)頁面

// 命名的路由，并加上參數(shù)，讓路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

路由定義的JS代碼：

const routes = [
    { path: '/other-page', component: () => import('../views/OtherPage.vue') },    
];

跳轉(zhuǎn)頁面的JS代碼：

try {
  this.$router.push({
    name: 'OtherPage', // 目標頁面的路由名稱
    query: {
      param1: 'value1',
      param2: 'value2'
    }
  });
} catch (error) {
  console.log(`router.push.err=${error}`)
}

點擊按鈕進行頁面跳轉(zhuǎn)，結(jié)果卻失敗，表示匹配不上我設(shè)置的路由，報錯如下：

router.push.err=Error: No match for
 {"name":"OtherPage","query":{"param1":"value1","param2":"value2"},"params":{}}

四、解決方法

既然是匹配不上，那么會不會是路由對象中沒有與之匹配的參數(shù)，那我打印一下路由看看

示例代碼：

  const routes = this.$router.options.routes;
  console.log(routes)
  const routeNames = routes.map(route => route.name);
  console.log(routeNames);

打印結(jié)果：

原來路由名字是 undefined ，瞬間知道解決方法，給路由起個名字 name:'OtherPage' ，路由定義的JS代碼如下所示：

{ path: '/other-page',name:'OtherPage', component: () => import('../views/OtherPage.vue') },

再次點擊跳轉(zhuǎn)，完美手工

五、完整代碼

路由定義 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是子路由

有跳轉(zhuǎn)按鈕的頁面 AboutPage.vue

<template>
  <div>
    <h1>About</h1>
    <button @click="jumpToPageWithParam">帶參跳轉(zhuǎn)到其它頁面</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>

跳轉(zhuǎn)到的頁面 OtherPage.vue

<template>
  <div>
    <h1>接收帶參跳轉(zhuǎn)的頁面</h1>
  </div>
</template>
<script>
export default {
  name: 'AboutPage',
  mounted() {
    // 獲取查詢參數(shù)
    const param1 = this.$route.query.param1;
    const param2 = this.$route.query.param2;
    // 使用參數(shù)執(zhí)行操作
    console.log('param1:', param1);
    console.log('param2:', param2);
  }
};
</script>
<style scoped>
h1 {
  color: #42b983;
}
</style>

以上就是vue3路由router.push的使用以及問題分析的詳細內(nèi)容，更多關(guān)于vue3 router.push的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: