快速掌握 Vue Router 使用方法

Vue Router 是 Vue.js 官方提供的路由管理器。它可以轻松地实现 SPA（单页应用）应用的路由跳转、参数传递、路由嵌套等功能，同时集成了浏览器的前进、后退等操作。

以下是 Vue Router 的完整攻略，帮助你快速掌握 Vue Router 的使用方法。

安装与使用

我们需要通过 npm 安装 vue-router。

npm install vue-router

Vue Router 安装成功后，我们需要在 main.js 中导入和使用它。

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

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // routes 配置项可以设置路由，下面我们会讲到
  ]
})

new Vue({
  router, // 在 Vue 实例中注册路由
  render: h => h(App)
}).$mount('#app')

为了方便，我们可以将 routes 单独拆分到一个 router.js 文件中，再通过 import 引入。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'

Vue.use(VueRouter)

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

export default router

在 main.js 中导入 router，在 Vue 实例中注册 router。

import Vue from 'vue'
import App from './App.vue'
import router from './router'

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

路由配置

routes 是 Vue Router 的配置项，我们可以在其中设置路由的 name、path 和 component。

routes: [
  {
    path: '/',
    name: 'home',
    component: Home
  }
]

路由配置中的 path 可以设置路由的访问路径。component 则是这个路由对应的组件。

嵌套路由

嵌套路由是指路由中包含子路由，通过嵌套实现多重映射。Vue Router 提供了 children 配置项用于实现嵌套路由。

routes: [
  {
    path: '/',
    name: 'home',
    component: Home,
    children: [
      {
        path: 'page1',
        name: 'page1',
        component: Page1
      },
      {
        path: 'page2',
        name: 'page2',
        component: Page2
      }
    ]
  }
]

在上面的例子中，/对应的组件是 Home，它的子路由 page1 和 page2 分别对应 Page1 和 Page2 组件。

参数传递

在实际开发中，我们可能需要在跳转页面时传递参数。Vue Router 通过路由传参的方式可以实现参数在组件间的传递。

可以在路由中使用 props 属性和 props 函数传递参数。

routes: [
  {
    path: 'user/:userId',
    name: 'user',
    component: User,
    props: true // 开启 props 属性
  }
]

上面的例子中，path: 'user/:userId'中的 :userId 表示这个路由支持动态参数 userId，通过 props: true 开启 props 属性，这样在 User 组件中就可以直接通过 props 获取 userId 参数了。

// User.vue
props: ['userId']

在其他每个组件中使用 <router-link> 标签进行路由跳转，可以通过 to 属性传递需要跳转到的路由地址，并通过 params 属性传递参数。

<router-link :to="{ name: 'user', params: { userId: 123 }}">用户详情页</router-link>

上面的例子中，跳转到 name: 'user' 的路由地址，并传递了参数 { userId: 123 }。

路由守卫

路由守卫是 Vue Router 提供的一种特殊功能，它可以监控路由变化，并做出相应的处理。在路由守卫中我们可以做一些全局的处理，比如用户未登录不能进入某个页面等等。

下面是路由守卫的使用方法：

router.beforeEach((to, from, next) => {
  // to 和 from 分别表示即将进入的路由和当前所在的路由
  // next() 方法用于路由跳转
  next()
})

完整示例

以下是一个完整的 Vue Router 示例代码，可以使用这个代码作为基础进行学习和练习。

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './views/Home.vue'
import User from './views/User.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/user/:userId',
      name: 'user',
      component: User,
      props: true,
    },
  ],
})

router.beforeEach((to, from, next) => {
  // 在这里可以做全局路由守卫处理
  next()
})

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

<!-- App.vue -->
<template>
  <div>
    <router-link to="/">首页</router-link>
    <router-link to="{ name: 'user', params: { userId: 123 }}">用户详情页</router-link>
    <router-view></router-view>
  </div>
</template>

<!-- Home.vue -->
<template>
  <div>这是首页</div>
</template>

<!-- User.vue -->
<template>
  <div>
    用户 {{ userId }} 的详情页
  </div>
</template>

<script>
export default {
  name: 'User',
  props: ['userId'],
}
</script>

至此，我们已经完成了 Vue Router 的完整攻略，你现在可以尝试自己编写代码并调试实验了。