Vue Router4與Router3路由配置與區(qū)別說明

更新時間：2025年04月01日 14:38:24 作者：貓老板的豆

這篇文章主要介紹了Vue Router4與Router3路由配置與區(qū)別說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

路由安裝

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 設計的，而 Vue Router 3 與 Vue 2 兼容。
Composition API 的集成：Vue Router 4 提供了更好的對 Vue 3 Composition API 的支持，允許你使用 useRoute 和 useRouter 鉤子在組合式組件中訪問路由信息。
TypeScript 支持：Vue Router 4 對 TypeScript 提供了更好的支持，類型定義更加完整和準確。
路由守衛(wèi)的改進：Vue Router 4 改進了路由守衛(wèi)（導航守衛(wèi)）的 API，提供了更多的靈活性和控制。
滾動行為：Vue Router 4 改進了滾動行為的管理，允許更細粒度的控制。

具體體現(xiàn)在：