文章目录
- 路由安装
- 路由配置
- vue-router 3.x版本写法
- 配置路由
- 使用路由
- vue-router 4.x版本写法
- 配置路由
- 使用路由
- Vue Router 4 与 Vue 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 改进了滚动行为的管理,允许更细粒度的控制。
具体体现在:
- 由
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() |