vue-router路由使用说明

ゝ一纸荒年。 2024-03-23 15:09 83阅读 0赞

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 元素上。

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