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 版本寫法
配置路由
// 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 版本寫法
配置路由
// 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中的v-model，v-bind，v-on的區(qū)別解析
vue.js是一套構(gòu)建用戶界面的框架，只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合，vue.js有配套的第三方類庫(kù)，可以整合起來(lái)做大型項(xiàng)目的開(kāi)發(fā)，這篇文章主要介紹了v-model，v-bind，v-on的區(qū)別,需要的朋友可以參考下2022-12-12
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁(yè)面應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于降低vue-router版本的2種解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
Vue腳手架安裝時(shí)遇到的無(wú)法安裝問(wèn)題詳解
開(kāi)發(fā)中遇到bug是在正常不過(guò)了,而程序也基本都是bug堆里爬出來(lái)的,下面這篇文章主要給大家介紹了關(guān)于Vue腳手架安裝時(shí)遇到的無(wú)法安裝問(wèn)題的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue 里面的 $forceUpdate() 強(qiáng)制實(shí)例重新渲染操作
這篇文章主要介紹了vue 里面的 $forceUpdate() 強(qiáng)制實(shí)例重新渲染操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
基于uniapp+vue3自定義增強(qiáng)版table表格組件「兼容H5+小程序+App端」
uv3-table：一款基于uniapp+vue3跨端自定義手機(jī)端增強(qiáng)版表格組件,支持固定表頭/列、邊框、斑馬紋、單選/多選,自定義表頭/表體插槽、左右固定列陰影高亮顯示,支持編譯兼容H5+小程序端+App端,H5+小程序+App端,多端運(yùn)行一致2024-05-05
這篇文章主要介紹了Vue中使用sass實(shí)現(xiàn)換膚功能，實(shí)現(xiàn)此功能用到了三個(gè)主要文件（base.scss、mixin.scss、varibale.scss）,需要的朋友可以參考下2018-09-09
vue-cli3 項(xiàng)目從搭建優(yōu)化到docker部署的方法
這篇文章主要介紹了vue-cli3 項(xiàng)目從搭建優(yōu)化到docker部署的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
Vue動(dòng)態(tài)組件與異步組件實(shí)例詳解
這篇文章主要介紹了Vue動(dòng)態(tài)組件與異步組件,結(jié)合實(shí)例形式分析了動(dòng)態(tài)組件與異步組件相關(guān)概念、功能及使用技巧,需要的朋友可以參考下2019-02-02
這篇文章主要為大家介紹了vue中百度地圖定位及附近搜索功能使用步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Vue.js中NaiveUI組件文字漸變的實(shí)現(xiàn)
這篇文章主要介紹了Vue.js中NaiveUI組件文字漸變的實(shí)現(xiàn)，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07