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(() => {
  // 在路由切换后执行的逻辑
})