vue-router路由使用说明

最新推荐文章于 2023-12-25 20:52:05 发布

dogdev

最新推荐文章于 2023-12-25 20:52:05 发布

阅读量151

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_36901092/article/details/130258470

版权

VueRouter是Vue.js的官方路由管理器，简化了单页应用的构建。本文介绍了VueRouter的安装、路由定义（如路由映射表）、路由传参、编程式和声明式导航，以及不同类型的路由守卫的使用方法，帮助理解和掌握Vue应用中的路由控制。

摘要由CSDN通过智能技术生成

Vue Router 是 Vue.js 官方的路由管理器。它与 Vue.js 的核心深度集成，使得构建单页应用变得更加容易。在本文中，我们将探讨 Vue Router 的基本使用方法，包括路由定义、路由传参、路由导航等。

安装

在使用 Vue Router 之前，我们需要先安装它。可以通过 npm 或 yarn 安装：

npm install vue-router

或

yarn add vue-router

定义路由

在使用 Vue Router 时，我们需要先定义路由。定义路由可以通过创建一个路由实例，然后定义路由映射表的方式来完成。

路由映射表是一个对象，它将 URL 路径映射到组件。例如：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/user/:id', component: User }
  ]
})

在这个例子中，我们定义了三个路由。路径为 / 的路由对应的组件是 Home，路径为 /about 的路由对应的组件是 About，路径为 /user/:id 的路由对应的组件是 User。其中，:id 表示路由参数，它可以在组件中通过 this.$route.params.id 访问到。

路由传参

在某些情况下，我们需要将一些参数传递给路由，以便在组件中使用。可以通过在 URL 中添加参数的方式来实现。

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

// 在组件中使用
<template>
  <div>
    <p>User ID: {{ $route.params.id }}</p>
  </div>
</template>

// 导航到带有参数的路由
<router-link :to="'/user/' + userId">User</router-link>

在这个例子中，我们将用户 ID 作为路由参数传递给了路由组件 User。在组件中，可以通过 $route.params.id 访问到这个参数。在导航时，我们使用了路由链接组件，通过动态绑定 to 属性来指定要导航到的路由。

路由导航

在 Vue Router 中，路由导航有两种方式：声明式导航和编程式导航。

声明式导航

声明式导航可以通过 Vue.js 提供的组件来实现。这种方式相对简单，只需要在模板中使用组件即可。

<router-link to="/about">About</router-link>

编程式导航

编程式导航可以通过调用 $router.push 或 $router.replace 方法来实现。这种方式需要在 JavaScript 中进行操作，通常在组件中使用。例如：

// 导航到指定路径
this.$router.push('/about')

// 导航到指定路由对象
this.$router.push({ path: '/about' })

// 带有参数的导航
this.$router.push({ path: '/user', params: { id: 123 } })

// 替换当前路由，而不是添加新的历史记录
this.$router.replace('/about')

在这个例子中，我们调用了 $router.push 方法来进行导航。可以传递一个路径字符串或路由对象作为参数。如果需要在导航时传递参数，可以将参数添加到路由对象的 params 属性中。另外，如果需要替换当前路由而不是添加新的历史记录，可以使用 $router.replace 方法。

路由守卫

在 Vue Router 中，路由守卫可以用来在导航到某个路由前后执行一些逻辑，例如检查用户权限、验证用户身份等。Vue Router 提供了多个路由守卫，包括全局守卫、路由独享守卫和组件内守卫等。

全局守卫

全局守卫可以在整个应用程序中使用，它们会影响所有路由。可以通过在路由实例上定义 beforeEach、beforeResolve 和 afterEach 方法来实现。

const router = new VueRouter({
  routes: [...],
})

router.beforeEach((to, from, next) => {
  // 在导航到每个路由前执行
  next()
})

router.beforeResolve((to, from, next) => {
  // 在解析路由组件前执行
  next()
})

router.afterEach((to, from) => {
  // 在导航完成后执行
})

在这个例子中，我们定义了三个全局守卫，分别是 beforeEach、beforeResolve 和 afterEach。这些守卫接收三个参数：要导航的目标路由对象、当前路由对象和一个 next 回调函数。next 回调函数用于控制路由的导航，可以传递一个参数来指定要导航到的路由，也可以不传递参数表示继续导航到目标路由。

路由独享守卫

路由独享守卫可以在某个路由上单独定义，只会影响该路由及其子路由。可以在路由对象上定义 beforeEnter 方法来实现。

const router = new VueRouter({
  routes: [
    {
      path: '/about',
      component: About,
      beforeEnter: (to, from, next) => {
        // 在导航到该路由前执行
        next()
      }
    }
  ]
})

在这个例子中，我们在路由对象上定义了 beforeEnter 方法，它会在导航到该路由前执行。这个方法和全局守卫的参数和用法是一样的。

组件内守卫

组件内守卫可以在某个组件内部定义，只会影响该组件的路由。可以在组件中定义 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 方法来实现。

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 在进入该路由前执行
    next()
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由更新时执行
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 在离开该路由前执行
    next()
  }
}

在这个例子中，我们在组件中定义了 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 方法。这些方法和全局守卫的参数和用法是一样的。

示例代码

下面是一个简单的示例，演示了如何使用 Vue Router 实现基本的路由功能和路由守卫。首先，我们需要在 index.html 中引入 Vue 和 Vue Router：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue Router 示例</title>
</head>
<body>
  <div id="app">
    <h1>Vue Router 示例</h1>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于我们</router-link>
    <router-view></router-view>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <script src="app.js"></script>
</body>
</html>

然后，我们需要在 app.js 中定义路由和路由守卫：

const Home = { template: '<div>首页</div>' }
const About = { template: '<div>关于我们</div>' }

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

router.beforeEach((to, from, next) => {
  // 模拟异步操作
  setTimeout(() => {
    console.log(`从 ${from.path} 导航到 ${to.path}`)
    next()
  }, 1000)
})

const app = new Vue({
  el: '#app',
  router,
})

在这个示例中，我们定义了两个组件 Home 和 About，并将它们与路径 / 和 /about 对应起来。然后，我们定义了一个全局守卫，在每次导航前都会打印出从哪个路由导航到哪个路由。最后，我们将路由实例添加到 Vue 实例中，并挂载到页面上的 #app 元素上。

现在，我们就可以在浏览器中运行这个示例，看看路由和路由守卫的效果了。

dogdev

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue-router路由使用说明

Vue Router 是 Vue.js 官方的路由管理器。它与 Vue.js 的核心深度集成，使得构建单页应用变得更加容易。在本文中，我们将探讨 Vue Router 的基本使用方法，包括路由定义、路由传参、路由导航等。
复制链接

扫一扫