Vue Router 4 与 Router 3 路由配置与区别

路由安装

• Vue 2 (使用 Vue Router 3) ：npm install vue-router@3

• Vue 3 (使用 Vue Router 4) ：npm install vue-router@4

---

路由配置

vue-router 3.x版本写法

配置路由

// 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({  // 区别1mode: 'history',  // 区别2base: 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')  // 区别3  

.

vue-router 4.x版本写法

配置路由

// 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({  // 区别1history: createWebHistory(process.env.BASE_URL),  // 区别2routes  
})  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)  // 区别3  
app.mount('#app')

---

Vue Router 4 与 Vue Router 3 区别

• 与 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 提供了更好的支持，类型定义更加完整和准确。

• 路由守卫的改进：Vue Router 4 改进了路由守卫（导航守卫）的 API，提供了更多的灵活性和控制。

• 滚动行为：Vue Router 4 改进了滚动行为的管理，允许更细粒度的控制。

具体体现在：

1. 由 createRouter() 替换 new Router()
2. 路由模式由 createWebHistory() 替换 mode: 'history'
3. main.js中由 .use(router) 替换 new Vue({ router })
   .

路由模式区别

vue-router 3.x	vue-router 4.x
history	createWebHistory()
hash	createWebHashHistory()
abstract	createMemoryHistory()