Vue-router入门：新手必读指南

Vue-router是Vue.js官方的路由处理库，主要用于管理单页面应用（SPA）中的路由。以下是关于Vue-router的基础知识、配置、导航、动态路由、嵌套路由和高级功能的详细指南，帮助初学者快速掌握Vue-router的使用。

Vue-router是什么

Vue-router是Vue.js的官方路由处理库，用于实现Vue.js应用中的路由功能。它允许你定义不同的路由，每个路由对应于不同的视图组件，从而实现页面的动态变更。

Vue-router的作用和优势

Vue-router的主要作用是管理SPA的URL和视图组件之间的映射关系。通过Vue-router，可以轻松地实现页面的跳转和视图的动态加载。其优势包括：

• 高效性：Vue-router使用了一种称为“虚拟DOM”的机制，能够高效地更新和渲染页面组件。
• 灵活性：可以自定义路由规则，支持动态路由和嵌套路由，满足复杂的应用需求。
• 导航守卫：提供了多种导航守卫，可以在路由跳转前后执行特定的逻辑，实现权限控制等功能。
• 支持懒加载：通过动态加载组件，可以减少初始加载的资源占用，提高页面加载速度。

如何安装和引入Vue-router

安装Vue-router可以通过npm，具体命令如下：

npm install vue-router@next

安装完成后，需要在项目中引入并使用Vue-router。首先，创建一个路由实例并配置路由规则，然后在Vue实例中使用。

import { createRouter, createWebHistory } from 'vue-router'

// 定义路由规则
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

// 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes
})

// 在Vue实例中使用路由
import Vue from 'vue'
import App from './App.vue'

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

创建路由对象

首先，需要创建一个路由配置对象，该对象定义了应用中的所有路由规则。路由的定义由一个数组构成，每个元素包含path和component两个属性：

import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

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

const router = createRouter({
  history: createWebHistory(),
  routes
})

上述代码中，定义了两个路由规则，一个路径为/，对应的组件为Home；另一个路径为/about，对应的组件为About。

定义路由路径和组件对应关系

在路由对象中，使用path属性定义路由的路径，使用component属性定义对应的组件。例如：

import Home from './components/Home.vue'
import About from './components/About.vue'
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

其中，path为路由的路径，component为该路径对应的组件。

路由的全局配置和局部配置

路由的配置可以分为全局配置和局部配置。全局配置在应用的根级别进行，而局部配置则在子组件中进行。

全局配置

全局配置是在应用的根组件中定义路由规则，所有子组件都可以访问到这些路由规则。例如：

import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

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

const router = createRouter({
  history: createWebHistory(),
  routes
})

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

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

局部配置

局部配置是在子组件中定义路由规则。例如，可以在一个子组件中动态添加路由：

import { createRouter, createWebHistory } from 'vue-router'
import MyComponent from './components/MyComponent.vue'

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

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default {
  name: 'MySubComponent',
  beforeRouteEnter(to, from, next) {
    next()
  },
  beforeRouteUpdate(to, from, next) {
    next()
  },
  beforeRouteLeave(to, from, next) {
    next()
  }
}

在上述代码中，子组件MySubComponent定义了自身的路由规则，并且定义了路由守卫。

导航守卫的作用

在子组件中使用导航守卫时，可以确保在导航发生前执行特定逻辑，例如权限验证。例如：

export default {
  name: 'MySubComponent',
  beforeRouteEnter(to, from, next) {
    if (canAccessMyRoute()) {
      next()
    } else {
      next('/')
    }
  }
}

在上述代码中，beforeRouteEnter导航守卫在用户尝试访问/myroute路径时执行，如果用户没有权限访问该路径，则会跳转到主页。

使用组件内的导航方法

在组件内部，可以使用router对象提供的导航方法，如router.push、router.replace等进行路由跳转。例如：

import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()

    const goToAbout = () => {
      router.push('/about')
    }

    return { goToAbout }
  }
}

上述代码中，使用useRouter获取路由对象，并使用router.push方法跳转到/about路径。

路由链接组件<router-link>的使用

<router-link>是Vue-router提供的一个标签，用于在页面中创建导航链接，它与HTML中的<a>标签类似，但功能更强大。例如：

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

上述代码中，点击链接会跳转到对应的路径。

编程式导航与导航守卫

除了通过<router-link>标签进行导航外，还可以通过编程的方式进行导航，即编程式导航。例如：

import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()

    const goToAbout = () => {
      router.push('/about')
    }

    return { goToAbout }
  }
}

导航守卫是Vue-router提供的在导航发生前执行的函数，可以用于执行权限验证、路由切换之前的逻辑等。例如：

const routes = [
  {
    path: '/about',
    component: About,
    beforeEnter: (to, from, next) => {
      if (canAccessAbout()) { // 假设canAccessAbout是一个判断权限的函数
        next()
      } else {
        next('/login') // 跳转到登录页面
      }
    }
  }
]

动态路由的添加和使用

动态路由允许在路由路径中使用参数，例如：

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

用户访问/user/123时，参数id的值为123。

传递和接收参数的方法

在组件中可以通过this.$route.params访问传递过来的参数。例如：

import { defineComponent } from 'vue'

export default defineComponent({
  name: 'User',
  setup() {
    const id = useRoute().params.id

    console.log(id) // 输出参数id的值

    return { id }
  }
})

上述代码中，通过this.$route.params.id获取传递的参数。

使用params和query传递数据

除了路径参数外，还可以使用query参数传递数据，这种参数通常用于传递一些额外的信息。例如：

import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()

    const goToUser = () => {
      router.push({ path: '/user', query: { id: 123, name: 'John' } })
    }

    return { goToUser }
  }
}

访问路由时可以通过this.$route.query获取传递的数据：

import { defineComponent } from 'vue'

export default defineComponent({
  name: 'User',
  setup() {
    const id = useRoute().query.id
    const name = useRoute().query.name

    console.log(id, name) // 输出id和name的值

    return { id, name }
  }
})

什么是嵌套路由

嵌套路由允许在一个路由的组件中定义子路由，这样可以更好地组织复杂的页面结构。例如：

const routes = [
  {
    path: '/parent',
    component: Parent,
    children: [
      { path: 'child1', component: Child1 },
      { path: 'child2', component: Child2 }
    ]
  }
]

如何配置嵌套路由

嵌套路由的配置通过在父级路由的children属性中添加子路由来实现。例如：

import { createRouter, createWebHistory } from 'vue-router'
import Parent from './components/Parent.vue'
import Child1 from './components/Child1.vue'
import Child2 from './components/Child2.vue'

const routes = [
  {
    path: '/parent',
    component: Parent,
    children: [
      { path: 'child1', component: Child1 },
      { path: 'child2', component: Child2 }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

动态子路由的实现

动态子路由允许在子路由中使用参数。例如：

const routes = [
  {
    path: '/parent/:id',
    component: Parent,
    children: [
      { path: 'child1', component: Child1 },
      { path: 'child2', component: Child2 }
    ]
  }
]

路由懒加载

路由懒加载可以实现按需加载组件，提高应用的性能。例如：

const routes = [
  {
    path: '/lazy',
    component: () => import('./components/Lazy.vue')
  }
]

上述代码中，Lazy.vue组件是在需要时才进行加载的。

命名视图

命名视图允许在相同的路由路径下定义多个视图组件。例如：

const routes = [
  {
    path: '/',
    components: {
      default: Home,
      aside: Aside
    }
  }
]

使用<router-view>标签时，可以通过name属性指定视图组件：

<router-view></router-view>
<router-view name="aside"></router-view>

路由元信息meta的使用

路由元信息meta用于存储路由的额外信息，例如权限控制、页面标题等。例如：

const routes = [
  {
    path: '/admin',
    component: Admin,
    meta: { requiresAuth: true }
  }
]

在导航守卫中可以访问这些元信息：

const routes = [
  {
    path: '/admin',
    component: Admin,
    meta: { requiresAuth: true },
    beforeEnter: (to, from, next) => {
      if (to.meta.requiresAuth) {
        if (isAuthenticated()) {
          next()
        } else {
          next('/')
        }
      } else {
        next()
      }
    }
  }
]
``

以上是Vue-router的入门指南，涵盖了从基础配置到高级功能的各个方面。希望本指南能够帮助初学者快速掌握Vue-router的使用。