Vue Router 核心知识详解：从入门到实战

Vue Router：构建单页应用的利器

基本使用

Vue Router 是构建单页应用（SPA）的官方路由器，它为 Vue.js 提供了强大的功能和直观的 API。要使用 Vue Router，需要先安装它：

npm install vue-router

然后在 Vue 实例中注册 Vue Router：

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

Vue.use(VueRouter)

const router = new VueRouter({
  // 路由配置
})

要显示不同的路由视图，使用 router-view 组件：

<router-view></router-view>

要进行导航，使用 router-link 组件：

<router-link to="/about">关于</router-link>

嵌套路由

嵌套路由允许创建分层的路由结构，子路由嵌套在父路由中。当访问父路由时，子路由就会被渲染：

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

动态路由匹配

动态路由匹配使用占位符来匹配 URL 中动态的部分：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User
    }
  ]
})

命名路由

命名路由允许使用名称而不是路径来引用路由：

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

编程式导航

编程式导航允许使用 JavaScript 代码进行导航：

router.push({ name: 'about' })

高级特性

路由元信息

路由元信息允许为路由关联自定义数据：

const router = new VueRouter({
  routes: [
    {
      path: '/about',
      component: About,
      meta: {
        title: '关于我们'
      }
    }
  ]
})

钩子

钩子允许在路由生命周期的不同阶段执行自定义逻辑：

const router = new VueRouter({
  routes: [
    {
      path: '/about',
      component: About,
      beforeEnter: (to, from, next) => {
        // 在进入路由之前执行的逻辑
      }
    }
  ]
})

过渡

过渡允许为路由转换添加动画效果：

const router = new VueRouter({
  routes: [
    {
      path: '/about',
      component: About,
      transition: 'fade'
    }
  ]
})

基于 Vue-Router 的案例

购物网站

购物网站通常需要嵌套路由来表示不同的产品类别和产品详情页。

博客

博客需要动态路由匹配来显示特定文章，并使用命名路由来简化导航。

仪表盘

仪表盘需要编程式导航来管理不同的仪表盘视图和组件。

常见问题解答

1. 如何在 Vue Router 中设置默认路由？

在路由配置中使用 redirect 属性：

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

2. 如何使用 Vue Router 传递参数？

通过 props 属性将参数传递给组件：

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

3. 如何在 Vue Router 中使用守卫？

在路由配置中使用 beforeEnter 守卫：

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      beforeEnter: (to, from, next) => {
        // 检查用户是否已登录
      }
    }
  ]
})

4. 如何在 Vue Router 中使用过渡动画？

在路由配置中使用 transition 属性：

const router = new VueRouter({
  routes: [
    {
      path: '/about',
      component: About,
      transition: 'fade'
    }
  ]
})

5. 如何在 Vue Router 中使用懒加载？

使用 component 函数懒加载组件：

const router = new VueRouter({
  routes: [
    {
      path: '/about',
      component: () => import('./About.vue')
    }
  ]
})