Vue Router4与Router3路由配置与区别说明
作者：猫老板的豆
这篇文章主要介绍了Vue Router4与Router3路由配置与区别说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
路由安装
- 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({ // 区别1
mode: 'history', // 区别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') // 区别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({ // 区别1
history: createWebHistory(process.env.BASE_URL), // 区别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) // 区别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 改进了滚动行为的管理，允许更细粒度的控制。
具体体现在：
- 由
createRouter()替换new Router() - 路由模式由
createWebHistory()替换mode: 'history' - main.js中由
.use(router)替换new Vue({ router })
路由模式区别
| vue-router 3.x | vue-router 4.x |
|---|---|
| history | createWebHistory() |
| hash | createWebHashHistory() |
| abstract | createMemoryHistory() |
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。