Vue Router 4的完整使用教程

一、Vue Router 4简介

Vue Router 4是Vue.js官方提供的路由管理插件，它可以轻松地实现前端路由功能。Vue Router 4的出现，使得我们的前端路由管理更加流畅而简单，从而提高了前端的模块化开发效率。

Vue Router 4可以在浏览器端通过URL来定位所需资源，基于Vue.js和Vue生态系统本身的提供的能力，Vue Router 4提供了非常灵活的路由管理方式，能够将组件与URL一一映射，方便我们进行页面的跳转和操作，而且支持嵌套路由和动态路由参数，这些都大大增强了前端开发的功能性。

Vue Router 4的主要特点包括：

• 支持嵌套路由和动态路由参数
• 提供了大量的路由生命周期钩子函数
• 支持命名路由和命名视图
• 提供了全局导航守卫，用于控制全局路由的跳转

二、Vue Router 4的基本使用

在使用Vue Router 4之前，需要先安装，并在应用程序中进行注册。其安装方式如下：

$ npm install vue-router@next

安装完成之后，需要在应用程序的入口文件中进行注册，最简单的方法是在入口文件中传入一个Vue对象，安装路由并注册一个根路由：

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'

const routes = [
  { path: '/', component: Home },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

const app = createApp({})
app.use(router)
app.mount('#app')

在上面的代码中，我们首先引入了Vue Router 4提供的createRouter和createWebHistory方法，并创建了一个路由表routes。接着，在createRouter方法中设置了history模式，注册了路由表，最后在Vue实例中使用了之前创建的路由实例。

注：这里使用了命名为Home的组件作为根路由。

当我们在App.vue种设置一个导航条，代码如下：

在这里，我们使用了 组件来指导Vue Router如何渲染我们的页面。to属性告诉Vue Router，此链接是要导航到哪个URL路径的，router-view则是Vue Router用来渲染组件的根节点。

在根目录中创建一个Home.vue组件：

  

<script>
export default {
  name: 'Home',
}
</script>

这个组件就是我们的根路由组件，用来展示我们的欢迎页面。

运行我们的应用程序，即可看到一个可以返回到主页的首页

三、Vue Router 4添加多个路由

在Vue Router 4中，我们可以在路由数组routes中添加多个路由。下面是一个添加多个路由的示例：

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

const app = createApp({})
app.use(router)
app.mount('#app')

在上面的代码中，我们通过在routes数组中添加多个路由来添加多个页面。每个路由由路径和组件组成，这些路由可以使用嵌套的方式进行组合。

在添加了多个路由之后，我们需要在应用程序中提供一个适当的导航形式，同时还需要为每个组件提供正确的路由路径。我们可以在组件内部使用$router和$route对象来访问路由系统。

在App.vue中增加每个页面的导航条，细节代码如下：

在组件的模板中增加动态绑定的路由信息，如下所示：

在这个模板中，我们使用$route对象来获取有关当前路由的信息，可以显示当前路由的路径和任何参数。

四、Vue Router 4的路由传参

在Vue Router 4中，路由传参分为动态路由和查询传参两种方式。接下来，我们将分别介绍这两种传参方式。

1.动态路由传参

动态路由参数是一种将任意字符串赋予给组件名的方式。在路由匹配成功时，参数值会被作为属性传递给匹配组件。动态路由被特别设计用来处理可以有多种状态的页面。

下面是承载信息的组件Phone.vue：

  

<script>
export default {
  name: 'Phone',
}
</script>

在路由中添加动态参数，代码如下：

import Phone from './components/Phone.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/phone/:id/:title', component: Phone },
]

在Phone.vue路由下，我们传入了参数id和title，$route.params.id和$route.params.title分别可以在组件中访问两个参数。

2.查询传参

查询传参是一种用于传递较少参数的方式。在URL中以键值对的方式传递参数，在组件中使用$route.query对象来获取路由参数的值。

下面是查询传参的案例：

import SearchResults from './components/SearchResults.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/search', component: SearchResults },
]

在App.vue中添加查询传参的导航，代码如下：

  Search
  

在路由组件中使用$route.query对象来获取路由参数的值，代码如下：

注：$route.query.query即表示：/search?query=“我们搜索的关键字”。

五、Vue Router 4的重定向和别名

1.重定向

Vue Router 4的重定向可以帮助我们将某个URL重定向到另一个URL。重定向可以帮助我们轻松地修正或改变URL。

假设我们想将“/home”重定向到我们的根目录“/”，我们可以直接在路由中添加一个重定向配置，如下所示：

const routes = [
  { path: '/', component: Home },
  { path: '/home', redirect: '/' },
]

在这个配置中，我们的路由系统会自动进行重定向，使得“/home”所在的路由将自动转换为“/”所在的路由。

2.别名

Vue Router 4的别名可以帮助我们为现有路由对象添加附加路径信息，或者创建多个路径使用同一组件的情况。

比如我们想要将“/products”和“/inventory”路由指向同一个组件ProductList，但是不希望在应用程序的多个地方使用“/products”时改变我们的后端API路由。在这种情况下，我们可以使用别名来解决这个问题。

const routes = [
  { path: '/', component: Home },
  { path: '/products', alias: '/inventory', component: ProductList }
]

在$route对象中，我们可以看到别名中的“/inventory”并未造成路由的改变，但是它会将$route.path设置为“/products”。

六、Vue Router 4的导航守卫

导航守卫是Vue Router 4的一个强大特性，尤其是用于控制全局的路由跳转。Vue Router 4提供了几种导航守卫，分别是路由全局守卫、路由级别守卫、组件内部级别守卫。

1.全局守卫

全局守卫是指在路由切换时发生的功能，它们允许我们拦截路由并在切换页面之前或之后执行某些操作。

全局守卫一共有三种类型，分别是beforeEach、beforeResolve和afterEach。

其中beforeEach用于在路由跳转之前进行拦截检查，beforeResolve用于在路由解析后但是在导航完成之前进行拦截检查，afterEach则用于在路由导航完成后进行拦截检查。

router.beforeEach((to, from, next) => {
  // 检查是否登录
  const isAuthenticated = localStorage.getItem('token')
  if (to.name !== 'login' && !isAuthenticated) next({ name: 'login' })
  else next()
})

router.beforeResolve((to, from, next) => {
  // 去掉等待动画
  next()
})

router.afterEach((to, from) => {
  // 做一些统计工作
})

2.路由级别守卫

每个路由对象都可以定义其自身的的导航守卫。

const routes = [
  {
    path: '/',
    component: Home,
    beforeRouteEnter(to, from, next) {
      // 当被访问时调用
    },
    beforeRouteUpdate(to, from, next) {
      // 当路由参数发生变化时调用
    },
    beforeRouteLeave(to, from, next) {
      // 当离开该路由时调用
    }
  },
]

在上述代码中，路由对象随后使用了“beforeRouteEnter”、“beforeRouteUpdate”和“beforeRouteLeave”三个导航守卫来定义路由级别守卫。每个组件都可以特别指定这些导航守卫，以实现不同的配置。

3.组件内部守卫

Vue Router 4中的组件级别守卫是指在组件内部使用了Vue Router 4