深入理解 Vue 路由的使用

Vue 的路由是一个非常重要的特性，可以方便地实现单页面应用（SPA），而不需要页面刷新。本文将介绍如何使用 Vue 路由，包括路由的基本使用、动态路由、嵌套路由和路由钩子函数等内容。

基本用法

首先，你需要安装 vue-router 插件：

npm install vue-router

然后，在 Vue 项目中使用路由，需要在 main.js 文件中进行如下配置：

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

Vue.use(VueRouter)

接下来，定义路由组件：

<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

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

然后，在main.js文件中定义路由：

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

最后，将路由注入到 Vue 实例中：

const router = new VueRouter({ routes })

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

现在，你可以在模板中使用 <router-link> 进行路由跳转：

<template>
  <div>
    <h1>Home</h1>
    <router-link to="/about">Go to About</router-link>
  </div>
</template>

当用户点击 "Go to About" 链接时，会自动跳转到 /about 路由。

动态路由

动态路由允许你使用动态片段来匹配某个路由，并将值注入到组件中。

在路由中使用动态路由时，需要在路由中使用占位符 : 来表示该路由是动态的，如下所示：

const routes = [
  { path: '/user/:id', component: User }
]

然后，在组件中使用 $route.params 来获取动态路由中的参数：

<template>
  <div>
    <h2>User {{ $route.params.id }}</h2>
  </div>
</template>

嵌套路由

Vue 允许你将路由嵌套到组件中，这样你就可以在一个页面中使用多个路由。

在路由中定义子路由时，需要在父级路由的组件中使用 <router-view> 占位符来显示子路由：

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      { path: 'profile', component: Profile },
      { path: 'posts', component: Posts }
    ]
  }
]

在组件中使用 this.$router.push() 来进行跳转。例如，在 Profile 组件中跳转到 Posts 组件：

<template>
  <div>
    <h1>Profile</h1>
    <button @click="goToPosts">Go to Posts</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Profile',
  methods: {
    goToPosts() {
      this.$router.push({ path: '/user/' + this.$route.params.id + '/posts' })
    }
  }
}
</script>

路由钩子函数

路由钩子函数允许你在路由发生变化前或变化后执行一些逻辑。Vue 提供了以下几个路由钩子函数：

beforeEach： 在每个路由变化前执行。
afterEach： 在每个路由变化后执行。
beforeRouteEnter： 在进入路由前执行。
beforeRouteLeave： 在离开路由前执行。
beforeRouteUpdate： 在复用当前路由时执行。

这里我们只介绍 beforeEach 和 beforeRouteEnter，其他钩子函数的使用方法可以参考官方文档。

beforeEach

beforeEach 允许你在每个路由变化前执行一些逻辑，例如检查用户是否已登录，如果没有登录则导航到登录页面：

router.beforeEach((to, from, next) => {
  if (!isLoggedIn && to.path !== '/login') {
    next('/login')
  } else {
    next()
  }
})

beforeRouteEnter

beforeRouteEnter 允许你在进入路由前执行一些逻辑，例如获取路由参数、获取数据等：

export default {
  name: 'User',
  beforeRouteEnter (to, from, next) {
    axios.get(`/api/user/${to.params.id}`)
      .then((response) => {
        next(vm => {
          vm.user = response.data
        })
      })
  }
}

上面的代码中，我们使用 axios 发送 GET 请求来获取用户数据，并将数据注入到组件中。

示例

为了更好的理解路由的使用，我们可以结合实际例子来学习。

示例1：导航菜单

假设我们需要在页面上实现一个导航菜单，菜单项可以点击跳转到不同的页面。我们可以使用以下代码实现：

<template>
  <div>
    <nav>
      <ul>
        <li>
          <router-link to="/">Home</router-link>
        </li>
        <li>
          <router-link to="/about">About</router-link>
        </li>
        <li>
          <router-link to="/contact">Contact</router-link>
        </li>
      </ul>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

在上面的代码中，我们定义了一个导航菜单，每个菜单都可以跳转到不同的路由。

示例2：搜索框

假设我们需要在页面上实现一个搜索框，当用户输入搜索关键字时，我们通过路由跳转到搜索结果页面。我们可以使用以下代码实现：

<template>
  <div>
    <input type="text" v-model="searchKeyword">
    <button @click="search">Search</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      searchKeyword: ''
    }
  },
  methods: {
    search() {
      this.$router.push({ path: '/search', query: { keyword: this.searchKeyword } })
    }
  }
}
</script>

在上面的代码中，我们定义了一个搜索框，当用户点击搜索按钮时，会跳转到搜索结果页面，并将路由参数注入到 query 中。