Vue-Router在Vue2和Vue3中的使用示例详解
作者：卷小白
1.Vue2
Vue Router是Vue.js官方的路由管理器，它能够帮助我们在Vue应用中实现页面之间的跳转和导航。在本篇博客中，我们将介绍如何在Vue 2中使用Vue Router，包括路由的配置、路由参数的传递和导航守卫的使用。
1.安装和配置Vue Router
首先，我们需要在Vue项目中安装Vue Router。使用npm或者yarn命令进行安装
npm install vue-router
安装完成后，在Vue项目的入口文件（通常是main.js）中引入Vue Router并配置
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 创建路由实例并配置路由规则
const router = new VueRouter({
routes: [
// 路由规则配置
// { path: '/home', component: Home }
]
})
// 将路由实例挂载到Vue实例上
new Vue({
router,
// ...其他配置
}).$mount('#app')2.配置路由规则
在路由实例的routes配置项中，我们可以定义应用的路由规则。每个路由规则由一个path和对应的component组成，path指定了URL路径，component指定了该路径对应的Vue组件。
例如，我们可以定义一个名为Home的组件，并配置对应的路由规则
import Home from '@/components/Home'
const router = new VueRouter({
routes: [
{ path: '/home', component: Home }
]
})这样，当用户访问/home路径时，会加载Home组件。
3.路由参数传递
有时候，我们需要在路由之间传递参数。Vue Router提供了多种传递参数的方式。
1.动态路由参数
我们可以在路由规则中使用动态参数，通过在path中使用冒号(:)来指定参数名
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})在上述例子中，:id表示动态参数，用户访问/user/123路径时，会加载User组件，并通过this.$route.params.id获取参数值。
2.查询参数
另一种传递参数的方式是使用查询参数。查询参数通常用于GET请求中，以键值对的形式出现在URL的后面，例如：/user?id=123。
Vue Router可以通过this.$route.query来获取查询参数，例如
// 假设用户访问路径为/user?id=123 console.log(this.$route.query.id) // 输出：123
4.导航守卫
Vue Router还提供了导航守卫的功能，用于在路由切换前后执行一些逻辑操作，例如权限验证、页面加载状态等。
常用的导航守卫包括beforeEach、beforeResolve、afterEach等。我们可以在路由实例上定义这些导航守卫，例如
const router = new VueRouter({
routes: [
// 路由规则配置
]
})
router.beforeEach((to, from, next) => {
// 在路由切换前执行的逻辑
// 可以进行权限验证等操作
next() // 必须调用next()才能继续路由切换
})
router.afterEach(() => {
// 在路由切换后执行的逻辑
})以上是Vue 2中使用Vue Router实现路由功能的基本介绍，包括了安装和配置Vue Router、路由规则的配置、参数传递以及导航守卫的使用。通过合理的使用Vue Router，我们能够更好地管理Vue应用的页面导航和路由跳转。
2.Vue3
1.安装和配置Vue Router
首先，我们需要在Vue项目中安装Vue Router。使用npm或者yarn命令进行安装
npm install vue-router@next
安装完成后，在Vue项目的入口文件（通常是main.js）中引入Vue Router并配置
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from './components/Home.vue'
const router = createRouter({
history: createWebHistory(),
routes: [
// 路由规则配置
{ path: '/home', component: Home }
]
})
createApp(App).use(router).mount('#app')2.配置路由规则
在路由实例的routes配置项中，我们可以定义应用的路由规则。每个路由规则由一个path和对应的component组成，path指定了URL路径，component指定了该路径对应的Vue组件。
例如，我们可以定义一个名为Home的组件，并配置对应的路由规则
import Home from './components/Home.vue'
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/home', component: Home }
]
}) 这样，当用户访问/home路径时，会加载Home组件。
3.路由参数传递
有时候，我们需要在路由之间传递参数。Vue Router提供了多种传递参数的方式。
3.1 动态路由参数
我们可以在路由规则中使用动态参数，通过在path中使用冒号(:)来指定参数名
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/user/:id', component: User }
]
})在上述例子中，:id表示动态参数，用户访问/user/123路径时，会加载User组件，并通过$route.params.id获取参数值。
3.2 查询参数
另一种传递参数的方式是使用查询参数。查询参数通常用于GET请求中，以键值对的形式出现在URL的后面，例如：/user?id=123。
Vue Router可以通过$route.query来获取查询参数，例如
// 假设用户访问路径为/user?id=123 console.log($route.query.id) // 输出：123
4.导航守卫
Vue Router在Vue 3中仍然提供了导航守卫的功能，用于在路由切换前后执行一些逻辑操作，例如权限验证、页面加载状态等。
常用的导航守卫包括beforeEach、beforeResolve、afterEach等。我们可以在路由实例上定义这些导航守卫，例如
const router = createRouter({
history: createWebHistory(),
routes: [
// 路由规则配置
]
})
router.beforeEach((to, from, next) => {
// 在路由切换前执行的逻辑
// 可以进行权限验证等操作
next() // 必须调用next()才能继续路由切换
})
router.afterEach(() => {
// 在路由切换后执行的逻辑
})到此这篇关于Vue-Router在Vue2和Vue3中的使用的文章就介绍到这了,更多相关Vue-Router 在Vue2和Vue3使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！