Vue Router4與Router3路由配置與區(qū)別說(shuō)明
更新時(shí)間：2025年04月01日 14:38:24 作者：貓老板的豆
這篇文章主要介紹了Vue Router4與Router3路由配置與區(qū)別說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
路由安裝
- Vue 2 (使用 Vue Router 3) ：
npm install vue-router@3
- Vue 3 (使用 Vue Router 4) ：
npm install vue-router@4
路由配置
vue-router 3 版本寫(xiě)法
配置路由
// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
Vue.use(Router)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
export default new Router({ // 區(qū)別1
mode: 'history', // 區(qū)別2
base: process.env.BASE_URL,
routes
})使用路由
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
router,
render: h => h(App)
}).$mount('#app') // 區(qū)別3 vue-router 4 版本寫(xiě)法
配置路由
// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = createRouter({ // 區(qū)別1
history: createWebHistory(process.env.BASE_URL), // 區(qū)別2
routes
})
export default router使用路由
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router) // 區(qū)別3
app.mount('#app')Vue Router 4 與 Vue Router 3 區(qū)別
- 與 Vue 版本的兼容性：Vue Router 4 是專門為 Vue 3 設(shè)計(jì)的，而 Vue Router 3 與 Vue 2 兼容。
- Composition API 的集成：Vue Router 4 提供了更好的對(duì) Vue 3 Composition API 的支持，允許你使用
useRoute和useRouter鉤子在組合式組件中訪問(wèn)路由信息。 - TypeScript 支持：Vue Router 4 對(duì) TypeScript 提供了更好的支持，類型定義更加完整和準(zhǔn)確。
- 路由守衛(wèi)的改進(jìn)：Vue Router 4 改進(jìn)了路由守衛(wèi)（導(dǎo)航守衛(wèi)）的 API，提供了更多的靈活性和控制。
- 滾動(dòng)行為：Vue Router 4 改進(jìn)了滾動(dòng)行為的管理，允許更細(xì)粒度的控制。
具體體現(xiàn)在：
- 由
createRouter()替換new Router() - 路由模式由
createWebHistory()替換mode: 'history' - main.js中由
.use(router)替換new Vue({ router })
路由模式區(qū)別
| vue-router 3.x | vue-router 4.x |
|---|---|
| history | createWebHistory() |
| hash | createWebHashHistory() |
| abstract | createMemoryHistory() |
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue router動(dòng)態(tài)路由實(shí)現(xiàn)過(guò)程
Vue動(dòng)態(tài)路由(約定路由),聽(tīng)起來(lái)好像很玄乎的樣子,但是你要是理解了實(shí)現(xiàn)思路,你會(huì)發(fā)現(xiàn)沒(méi)有想象中的那么難,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)動(dòng)態(tài)路由添加功能的簡(jiǎn)單方法,需要的朋友可以參考下2023-03-03
Vue實(shí)現(xiàn)預(yù)覽docx/xlsx/pdf等類型文件功能
這篇文章主要介紹了如何在Vue中實(shí)現(xiàn)docx/xlsx/pdf等類型文件預(yù)覽功能,在實(shí)現(xiàn)過(guò)程中，需要注意文件的格式和轉(zhuǎn)換方式，以及插件和組件的使用方法和注意事項(xiàng)，需要的朋友可以參考下2023-05-05
vue設(shè)計(jì)與實(shí)現(xiàn)合理的觸發(fā)響應(yīng)
這篇文章主要為大家介紹了vue設(shè)計(jì)與實(shí)現(xiàn)合理的觸發(fā)響應(yīng)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了vue中使用騰訊云Im的示例，幫助大家調(diào)用對(duì)應(yīng)的api，完成自己的項(xiàng)目，感興趣的朋友可以了解下2020-10-10
vue中關(guān)于template報(bào)錯(cuò)等問(wèn)題的解決
這篇文章主要介紹了vue中關(guān)于template報(bào)錯(cuò)等問(wèn)題的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue將單頁(yè)面改造成多頁(yè)面應(yīng)用的方法
最近領(lǐng)導(dǎo)交我一個(gè)項(xiàng)目是使用 vue-cli 搭建的單頁(yè)面應(yīng)用。下面小編通過(guò)本文給大家介紹vue將單頁(yè)面改造成多頁(yè)面應(yīng)用的方法 ，感興趣的朋友一起看看吧2018-11-11
基于vue的短信驗(yàn)證碼倒計(jì)時(shí)demo
這篇文章主要介紹了基于vue的短信驗(yàn)證碼倒計(jì)時(shí)demo，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
vuex實(shí)現(xiàn)數(shù)據(jù)持久化的兩種方案
這兩天在做vue項(xiàng)目存儲(chǔ)個(gè)人信息的時(shí)候,遇到了頁(yè)面刷新后個(gè)人信息數(shù)據(jù)丟失的問(wèn)題,在查閱資料后,我得出兩種解決數(shù)據(jù)丟失,使用數(shù)據(jù)持久化的方法,感興趣的小伙伴跟著小編一起來(lái)看看吧2023-08-08
淺析前端路由簡(jiǎn)介以及vue-router實(shí)現(xiàn)原理
路由就是用來(lái)跟后端服務(wù)器進(jìn)行交互的一種方式，通過(guò)不同的路徑，來(lái)請(qǐng)求不同的資源，請(qǐng)求不同的頁(yè)面是路由的其中一種功能。這篇文章主要介紹了前端路由簡(jiǎn)介以及vue-router實(shí)現(xiàn)原理,需要的朋友可以參考下2018-06-06
Vue組件傳值過(guò)程接收不成功的問(wèn)題及解決
這篇文章主要介紹了Vue組件傳值過(guò)程接收不成功的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06