Vue Router 使用总结
Vue3 的到来，Vue Router 也迎来了版本的迭代， Vue2 使用的版本是 Vue Router 3.x，而 Vue3 使用 Vue Router 4.x 版本，下面我们简单的过下基本使用。
一、什么是 Vue Router ？
Vue Router 是一个官方的 Vue.js 路由管理器，它允许在 Vue.js 应用程序中配置路由，从而实现不同 URL 对应不同的组件或视图。使用路由，可以使用户能够以交互的方式浏览应用程序并访问指定页面。同时，Vue Router 还提供了导航守卫、动态路由、嵌套路由等功能，可以使路由管理变得更加灵活且易于维护。
二、Vue Router 3.x 基本使用
以下是 Vue Router 3.x 的使用案例。
1、安装路由
yarn add vue-router@3.x || npm i vue-router@3.x
2、在main.js 引用路由
// main.js
import router from './router' // 路由规则文件
new Vue({
router,
render: h => h(App),
}).$mount('#app')
new Vue 创建 vue实例的时候引入 router，将 router 挂载到 vue实例中。
3、配置路由
为了保持 main.js 尽量简洁和方便维护，新增一个router.js路由配置文件。
// router.js 定义路由规则
import Vue from 'vue'
import Rourer from 'vue-router'
// 作用是安装路由，它会自动调用 router 实例中的 install 方法，将其注入到 Vue实例中
Vue.use(Rourer)
// 创建 router 实例
const router = new Rourer({
mode: 'hash', // hash 模式
routes: [
{
path: '/',
component: resolve => require(['./index.vue'], resolve),
},
{
path: '/index',
// 引入路由方式1：使用了 CommonJS 的 require语法，需要传入一个回调函数来异步加载组件，会将组件分别打包成单独 chunk，做到按需加载，访问这个路由才会加载组件。
component: resolve => require(['./index.vue'], resolve),
},
{
path: '/details',
// 引入路由方式2：使用import引入的话，会将组件打包到一个js里，导致首页加载内容过多
component: () => import('./details.vue'),
},
],
})
// 导出路由
export default router
4、使用路由
通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由：
// index.vue
export default {
computed: {
username() {
// 我们很快就会看到 `params` 是什么
return this.$route.params.username
}
},
methods: {
// 访问 details页面
goDetails() {
this.$router.push('/details')
}
}
}
三、Vue Router 4.x 基本使用
以下是 Vue Router 4.x 的使用案例。
1、安装路由
yarn add vue-router@4.x || npm i vue-router@4.x
2、在main.js 引用路由
// main.js
import { createApp } from 'vue'
import router from './router' // 路由规则文件
import App from './App.vue'
const app = createApp(App)
app.use(router).mount('#app')
createApp(App).use(router) 时，会将 router 挂载到 vue实例中。
3、配置路由
为了保持 main.js 尽量简洁和方便维护，新增一个router.js路由配置文件。
// router.js 定义路由规则
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
history: createWebHashHistory(), // hash 模式
routes: [
{
path: '/',
component: () => import('./index.vue'),
},
{
path: '/index',
component: () => import('./index.vue'),
},
{
path: '/details',
component: () => import('./details.vue'),
},
],
})
// 导出路由
export default router
4、使用路由
通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由：
// index.vue
export default {
computed: {
username() {
// 我们很快就会看到 `params` 是什么
return this.$route.params.username
}
},
methods: {
// 访问details页面
goDetails() {
this.$router.push('/details')
}
}
}
四、 Vue Router 4.x 主要有以下改变
1、路由实例创建方式变更
Vue Router 4.x 改为使用 createRouter 工厂函数来创建路由实例，而不再使用 Vue.use 安装路由插件的方法。
2、history 配置替代 mode
在 vue-router 4.x 中，新增了 history 配置，取代旧版本中的 mode 配置。
3、组合式 API
组合式 API 是一种创建路由的新方式，它提供了更灵活和直观的方式来定义和管理路由。组合式 API 基于 Vue 3的 Composition API，而不是之前版本中的选项 API。
4、更好的 TypeScript 支持
Vue Router 4.x 在 TypeScript 上支持更好，优化了类型定义和导出方式，让开发者在编写代码时能够享受到更好的类型提示和检查。
总体来说，Vue Router 4.x 主要是对 3.x 版本的一些增强和优化，包括代码结构、API 的改进，提供更好的 TypeScript 支持等等。但是，对于开发者来说，迁移到 Vue Router 4.x 是一个值得升级的过程，除了要考虑新版本的一些特性和 API 变更，还要重新调整自己的开发思路和习惯。
