Vue2路由基本用法实例分析

Vue是一款流行的JavaScript框架，其配套的Vue Router提供了路由管理功能，使得前端开发变得更加简单和灵活。本文将介绍Vue2路由的基本用法，帮助读者快速了解Vue Router的基本概念和用法。

安装和引入

使用Vue Router需要在Vue的基础上额外安装并引入Vue Router。可以通过npm或CDN引入：

# npm安装
npm install vue-router

# CDN引入
<script src="https://unpkg.com/vue-router@3.2.0/dist/vue-router.js"></script>

然后在Vue应用中引入Vue Router：

// 引入Vue和Vue Router
import Vue from 'vue'
import VueRouter from 'vue-router'

// 注册Vue Router插件
Vue.use(VueRouter)

// 创建Vue Router实例
const router = new VueRouter({ })

// 在Vue实例中使用Vue Router
new Vue({
  router,
  // ...其他配置
})

路由配置

创建Vue Router实例时，需要传入一个路由配置对象，并指定路由表和其他路由配置项。路由表是一个数组，其中每个对象表示一个路由，包括路由路径、对应的组件、和路由名称等信息。以下是一个简单的路由配置示例：

// 创建路由表
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/users/:id', component: User, props: true },
]

// 创建Vue Router实例
const router = new VueRouter({
  routes, // 路由表
  mode: 'history', // URL模式，去掉#号
})

在上述路由表中，定义了三个路由，分别对应了根路径、关于页面和用户详情页面。其中，路径中的:id表示动态路由，可以通过this.$route.params.id获取当前路由的动态参数值。

路由组件

路由组件是与路由相对应的Vue组件，表示用户访问特定路由时需要渲染的组件。在路由表中指定组件时，可以使用Vue的组件对象或异步加载组件的方法。

以下是一个路由组件的示例：

// 创建组件对象
const Home = {
  template: '<div>Home</div>'
}

// 在路由表中使用组件对象
const routes = [
  { path: '/', component: Home },
  // ...
]

路由链接

在Vue Router中，使用<router-link>组件生成链接，可以通过to属性指定链接目标路由，也可以通过tag属性指定链接标签。以下是一个路由链接的示例：

<router-link to="/">Home</router-link>
<router-link to="/about" tag="button">About</router-link>

路由守卫

路由守卫是Vue Router提供的一种机制，用于在路由切换过程中进行拦截和跳转控制。Vue Router提供了三种类型的路由守卫：全局守卫、路由独享守卫和组件内守卫。

以下是一个全局路由守卫的示例：

// 注册全局前置守卫
router.beforeEach((to, from, next) => {
  // 如果用户未登录，拦截路由跳转并跳转到登录页面
  if (!isAuthenticated() && to.path !== '/login') {
    next('/login')
  } else {
    next()
  }
})

在上述守卫中，to表示要跳转到的目标路由对象，from表示当前路由对象，next表示继续跳转或拦截并进行跳转的回调函数。

示例1：使用Vue Router实现Tab切换功能

以下是一个使用Vue Router实现Tab切换功能的示例，可以通过点击标签切换不同的子路由页面：

<template>
  <div>
    <router-link :to="`/tabs/${tab.id}`" v-for="tab in tabs" :key="tab.id" tag="button">{{ tab.name }}</router-link>
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { id: 1, name: 'Tab 1' },
        { id: 2, name: 'Tab 2' },
        { id: 3, name: 'Tab 3' },
      ],
    }
  },
}
</script>

在上述示例中，使用了路由链接和路由视图组件，通过<router-link>生成Tab标签，通过<router-view>渲染不同的子路由页面，从而实现了Tab切换功能。

示例2：使用Vue Router实现权限控制功能

以下是一个使用Vue Router实现权限控制功能的示例，根据用户角色和路由配置决定当前用户是否有权限访问某个页面：

// 创建路由表
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/admin', component: Admin, meta: { requireAuth: true, role: 'admin' } },
]

// 注册全局前置守卫
router.beforeEach((to, from, next) => {
  // 判断当前路由是否需要权限控制
  if (to.matched.some(record => record.meta.requireAuth)) {
    // 如果用户未登录，跳转到登录页面
    if (!isAuthenticated()) {
      next('/login')
      return
    }

    // 判断当前用户是否有权限访问该页面
    const userRole = getUserRole()
    const requireRole = to.matched[0].meta.role
    if (userRole !== requireRole) {
      next('/403') // 没有权限，跳转到403页面
      return
    }
  }

  next()
})

在上述示例中，通过在路由配置中定义meta对象来指定需要权限控制和访问权限等信息，在路由守卫中判断当前用户是否满足访问条件，如果不满足则拦截并跳转到相应的提示页面。