vue3中vue-router安裝配置使用全過程
更新時(shí)間：2025年09月24日 10:11:41 作者：keep_python
VueRouter是Vue.js官方的路由管理器,用于實(shí)現(xiàn)單頁面應(yīng)用(SPA)的路由功能,這篇文章主要介紹了vue3中vue-router安裝配置使用的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
總結(jié)：
- 哪里有跳轉(zhuǎn)，哪里有路由占位
<RouterView/> - js跳轉(zhuǎn)：router對(duì)象 :
const router = useRouter() - js收參：route對(duì)象 :
const route = useRoute() - 頁面跳轉(zhuǎn)：
<router-link :to="{ name: 'home', params: { id: 123 } }">主頁</router-link> - 注意： 盡量就使用 路由名
name跳轉(zhuǎn)即可！
1. 傳遞params參數(shù)時(shí)，若使用to的對(duì)象寫法，必須使用name配置項(xiàng)，不能用path。
2. 傳遞query參數(shù)時(shí)，若使用to的對(duì)象寫法，path可以使用name配置項(xiàng)，也可以使用path。
1. 路由器 router 安裝
npm install vue-router
2、路由器 router 配置
2.1 在 router 文件夾下創(chuàng)建 index.ts 文件，配置路由
/**
* 創(chuàng)建路由器并且暴露出去!
* vue3中必須指定工作模式!
*
* */
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router';
const routes: Array<RouteRecordRaw> = [
{
path: '/',
redirect: '/home',
},
{
path: '/home',
name: 'home',
component: () => import('@/views/demo_route/home.vue'),
},
{
path: '/about',
name: 'about',
component: () => import('@/views/demo_route/about.vue'),
},
{
path: '/news',
name: 'news',
component: () => import('@/views/demo_route/news.vue'),
},
];
// 引入
const router = createRouter({
// 路由器的工作模式
history: createWebHistory(),
routes,
});
// 暴露出去
export default router;
2.2 路由器 router 引入
在 main.ts 文件中引入路由：
import router from './router';
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.use(router);
app.mount('#app');
3、路由的簡單測試
<!--
* @author: keep_di
* @desc:
* 路由中有設(shè)計(jì)好的一個(gè)激活樣式：active-class
-->
<script setup lang="ts">
// RouterView
import { RouterView, RouterLink } from 'vue-router';
</script>
<template>
<div class="app">
<h2 class="title">路由測試學(xué)習(xí)</h2>
<hr />
<ul class="nav">
<RouterLink to="/home" active-class="nav_active">首頁</RouterLink>
<RouterLink to="/about" active-class="nav_active">關(guān)于</RouterLink>
<RouterLink to="/news" active-class="nav_active">新聞</RouterLink>
</ul>
<hr />
<router-view class="content"></router-view>
</div>
</template>
如何使用路由和路由器
1、路由跳轉(zhuǎn) 和 傳參
1.1 組件標(biāo)簽router-link 中
- to 的字符串寫法
<!-- 第一種：to的字符串寫法 --> <router-link to="/home">主頁</router-link>
- to 的對(duì)象寫法 ★
<!-- 第二種：to的name對(duì)象寫法 -->
<router-link :to="{ name: 'home', params: { id: 123 } }">主頁</router-link>
1.2 js中使用
前提：拿到路由器和路由對(duì)象：
- 跳轉(zhuǎn)： router對(duì)象！
- 收參： route對(duì)象！
import { useRoute, useRouter } from 'vue-router';
//導(dǎo)入能返回路由器和路由對(duì)象的方法！
const route = useRoute();
const router = useRouter();
路由跳轉(zhuǎn) ： 參數(shù)：params （類似post ）
router.push({ name: 'user', params: { user: '123', role: 'admin' } });
路由跳轉(zhuǎn) ：參數(shù)： query （類似get ）
router.push({ name: 'user', query: { user: '123', role: 'admin' } });
路由跳轉(zhuǎn) ：替換當(dāng)前路徑
router.replace({ path: '/home' });
路由跳轉(zhuǎn) ：回退和前進(jìn)標(biāo)簽
router.go(-1); //回退 router.go(0); //刷新 router.go(1); //前進(jìn)
2、路由收參：
<script setup lang="ts">
import { toRefs } from "vue";
import { useRoute } from "vue-router";
// 使用 useRoute 獲取參數(shù)
const route = useRoute();
let {query} = route //獲取query參數(shù)
let {params} = route //獲取params參數(shù)
</script>
<template>
<div>
{{params.name}} {{params.age}}
{{query.a}} {{query.b}}
</div>
</template>
3、路徑傳參和收參
配置路由時(shí)，設(shè)置路徑參數(shù)：
const routes = [
{
path: '/user/:id', // 定義路徑參數(shù) id
component: UserProfile,
},
];
頁面vue中接收路徑參數(shù)：
<script setup>
import { useRoute } from 'vue-router'
// 獲取路由實(shí)例
const route = useRoute()
// 直接獲取路徑參數(shù)（默認(rèn)是字符串類型）
const userId = route.params.id
// 如果需要數(shù)字類型，可手動(dòng)轉(zhuǎn)換
const userIdNum = Number(route.params.id)
</script>
4、監(jiān)聽參數(shù)變化：
當(dāng)從 /user/1 跳轉(zhuǎn)到 /user/2 時(shí)，組件不會(huì)重新創(chuàng)建 , 需監(jiān)聽參數(shù)變化以執(zhí)行相應(yīng)邏輯：
實(shí)現(xiàn)方案：
<script setup>
import { useRoute, watch } from 'vue-router'
const route = useRoute()
// 監(jiān)聽 params 整體變化
watch(
() => route.params,
(newParams, oldParams) => {
console.log('參數(shù)變化：', newParams.id)
// 執(zhí)行參數(shù)變化后的邏輯（如重新請(qǐng)求數(shù)據(jù)）
},
{ immediate: true } // 初始加載時(shí)立即執(zhí)行一次
)
// 只監(jiān)聽某個(gè)具體參數(shù)（如 id）
watch(
() => route.params.id,
(newId, oldId) => {
console.log('ID變化：', newId)
}
)
</script>
5、注意事項(xiàng)：
- 路徑參數(shù)始終是字符串類型，如需數(shù)字 / 布爾值等類型需手動(dòng)轉(zhuǎn)換（如 Number()）。
- 嵌套路由中，route.params 會(huì)包含所有層級(jí)的參數(shù)（如 /user/:id/post/:postId 可同時(shí)獲取 id 和 postId）。
- 若參數(shù)可能不存在，需做容錯(cuò)處理（如 route.params.id || ‘默認(rèn)值’）。
附：vue3配置vue-router報(bào)錯(cuò)解決方法
問題一：import { createRouter, createWebHashHistory} from 'vue-router'; 爆紅
解決方法：引入報(bào)錯(cuò)使用命令 pnpm install vue-router@4.2.1 -D
安裝vue-router4.2.1 版本
問題二：routes爆紅
找了很久發(fā)現(xiàn)是路由的組件component寫出了comment,我無語了
如果還不能解決可以使用RouteRecordraw定義路由配置
import { RouteRecordRaw } from 'vue-router';
export const constantRoute: Array<RouteRecordRaw> = [
{
path: '/login',
component: () => import('@/views/login/index.vue'),
name: 'login'
},
{
path: '/',
component: () => import('@/views/home/index.vue'),
name: 'layout'
},
{
path: '/404',
component: () => import('@/views/404/index.vue'),
name: '404'
},
// 任意路由
{
path: '/pathMatch(.*)*',
redirect: '/404',
name: 'Any'
}
]總結(jié)
到此這篇關(guān)于vue3中vue-router安裝配置使用的文章就介紹到這了,更多相關(guān)vue3 vue-router安裝配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue $attrs和$listeners的使用與區(qū)別
本文主要介紹了vue $attrs和$listeners的使用與區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
vue?大文件分片上傳(斷點(diǎn)續(xù)傳、并發(fā)上傳、秒傳)
本文主要介紹了vue?大文件分片上傳，主要包括斷點(diǎn)續(xù)傳、并發(fā)上傳、秒傳，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要介紹了vue?element如何添加遮罩層問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue3自定義指令的相關(guān)資料,Vue3自定義指令優(yōu)化了生命周期鉤子,提供了更靈活的DOM操作方式,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-04-04
本文主要介紹了vue3 reactive重新賦值的問題解決,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-11-11
這篇文章主要介紹了element--Diaolog彈窗打開之后渲染組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue實(shí)現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說明)
這篇文章主要介紹了Vue實(shí)現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說明)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue更改數(shù)組中的值，本文通過兩個(gè)例子，給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
下面小編就為大家分享一篇vue編譯打包本地查看index文件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
element-ui 中使用upload多文件上傳只請(qǐng)求一次接口
這篇文章主要介紹了element-ui 中使用upload多文件上傳只請(qǐng)求一次接口，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07