Vue高级使用之路由

Vue Router 是 Vue 提供的官方路由管理器，它可以让开发者快速地实现应用的路由功能，从而使用户能够通过浏览器地址栏或者链接访问到特定的页面。本文就来介绍一下 Vue Router 的使用方法。

安装

在使用 Vue Router 之前，我们需要先安装它。可以通过以下命令来进行安装：

npm install vue-router

简单的路由

首先，我们需要创建一个 Vue 实例，并在其中引入 Vue Router：

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

Vue.use(VueRouter)

接下来，我们可以定义一些路由规则，例如：

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

其中，每个路由规则都是一个对象，包含了 path 和 component 属性。当用户访问某个路由时，Vue Router 会根据路由规则找到对应的组件并渲染到页面中。这里，我们还定义了一个通配符路由 '*'，当用户访问不存在的路由时会自动跳转到首页。

接着，我们可以创建一个 router 实例，并将路由规则传递给它：

const router = new VueRouter({
  routes
})

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

new Vue({
  router
}).$mount('#app')

这样，我们就成功地实现了一个简单的路由功能。

动态路由

除了静态路由，Vue Router 还支持动态路由，即根据用户输入的参数动态生成相应的路由。例如，我们可以定义一条带有参数的路由规则：

{
  path: '/user/:id',
  component: User,
  props: true
}

这里，我们使用了冒号 : 来表示参数，参数名为 id。并且通过 props 属性将参数传递给组件。

在组件中，我们可以定义一个 props 属性来接收参数：

props: ['id']

这样，当用户访问 /user/123 时，Vue Router 会将 123 当做参数传递给组件，组件可以通过 this.id 来获取参数的值。

嵌套路由

有时候，我们需要在一个父组件中定义多个子组件，并且每个子组件都有自己的路由规则。这时，可以使用嵌套路由来实现。例如：

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    children: [
      {
        path: 'home',
        component: Home
      },
      {
        path: 'profile',
        component: Profile
      }
    ]
  }
]

在这个例子中，我们定义了一个父路由 /dashboard，它包含了两个子路由 /dashboard/home 和 /dashboard/profile。在父组件 Dashboard 中，我们可以通过 <router-view> 标签来渲染子组件。

导航守卫

Vue Router 提供了多个导航守卫，可以用于在路由切换过程中执行一些操作。例如，我们可以在路由切换前进行权限验证，或者在路由切换后执行一些额外的操作。常见的导航守卫有以下几种：

beforeEach：全局前置守卫。在每次路由切换前都会被调用。
beforeResolve：全局解析守卫。在每次路由组件解析完成后被调用，可以在解析完成后对组件进行修改。
afterEach：全局后置钩子。在每次路由切换之后都会被调用。
beforeEnter：路由独享守卫。在某个路由配置中定义，只会对当前路由生效。
beforeRouteUpdate：路由更新守卫。在路由更新时被调用，例如参数发生变化时。
beforeRouteLeave：路由离开守卫。在路由离开当前组件时被调用。

下面是一个例子，演示如何使用 beforeEach 导航守卫来进行权限验证：

router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  const isAuthenticated = checkAuth()

  if (requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

function checkAuth() {
  // todo: 判断用户是否已经登录
}

在这个例子中，我们定义了一个 beforeEach 导航守卫，它会在每次路由切换前被调用。我们使用 to.matched.some 方法来判断当前路由是否需要进行权限验证，如果需要，并且用户未登录，则跳转到登录页面。否则，执行正常的路由跳转操作。

下面是一个简单的例子，演示如何使用 Vue Router：

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

<script>
import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'

export default {
  name: 'App',
  components: { Home, About, Contact }
}
</script>

<style>
/* 样式 */
</style>

结语

Vue Router 是 Vue 的重要组成部分，它可以让我们更加方便地管理路由。在本文中，我们介绍了 Vue Router 的基本使用方法，包括静态路由、动态路由、嵌套路由和导航守卫。希望本文对您有所帮助。如果您有任何问题或者建议，请留言让我知道。