Vue Router路由原理

Vue Router 是 Vue.js 官方的路由管理器，它与 Vue.js 核心深度集成，使得构建单页应用（SPA）变得非常容易。Vue Router 的主要功能包括动态路由匹配、嵌套路由、编程式导航、命名路由、路由守卫等

Vue Router 原理

1. 单页应用（SPA）:

   • Vue Router 实现了单页应用的路由管理，通过 URL 的变化来渲染不同的视图，而不需要重新加载整个页面。

2. 路由匹配:

   • Vue Router 会根据当前 URL 匹配相应的路由规则，并渲染对应的组件。
   • 路由规则定义了 URL 模式和对应的组件映射关系。

3. 历史模式:

   • Vue Router 支持两种历史模式：hash 和 history。
     • hash 模式使用 URL 的 hash 部分（例如 http://example.com/#/about），适用于所有浏览器。
     • history 模式使用 HTML5 的 History API（例如 http://example.com/about），提供了更美观的 URL，但需要服务器配置支持。

4. 动态路由:

   • Vue Router 支持动态路由匹配，可以通过路径参数（例如 /user/:id）来捕获 URL 中的动态部分。

5. 嵌套路由:

   • 支持嵌套路由，可以在一个路由组件中嵌套另一个路由组件，实现复杂的页面结构。

6. 编程式导航:

   • 除了通过 URL 导航外，还可以通过编程方式（例如 this.$router.push）进行导航。

7. 路由守卫:

   • 提供了多种路由守卫（全局守卫、路由独享守卫、组件内守卫），可以在导航过程中进行权限控制、数据预加载等操作。

Vue Router 使用方法

安装 Vue Router

首先，你需要安装 Vue Router：

npm install vue-router

创建路由实例

在项目中创建一个路由配置文件，例如 router/index.js：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'

Vue.use(Router)

export default new Router({
  mode: 'history', // 使用 history 模式
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

在 Vue 实例中使用路由

在 main.js 中引入并使用路由实例：

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

Vue.config.productionTip = false

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

在模板中使用路由

在 App.vue 中使用 <router-view> 标签来渲染匹配到的组件：

<template>
  <div id="app">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

编程式导航

除了使用 <router-link> 进行导航外，还可以通过编程方式导航：

// 跳转到指定路径
this.$router.push('/about')

// 带查询参数的跳转
this.$router.push({ path: '/about', query: { id: 123 } })

// 命名路由的跳转
this.$router.push({ name: 'About', params: { id: 123 } })

嵌套路由

在路由配置中定义嵌套路由：

export default new Router({
  routes: [
    {
      path: '/user/:id',
      component: User,
      children: [
        {
          path: 'profile',
          component: UserProfile
        },
        {
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

在 User.vue 中使用 <router-view> 渲染子路由：

<template>
  <div>
    <h1>User {{ $route.params.id }}</h1>
    <router-view></router-view>
  </div>
</template>

路由守卫

在路由配置中添加路由守卫：

const router = new Router({
  routes: [
    // 路由配置
  ]
})

router.beforeEach((to, from, next) => {
  // 全局前置守卫
  console.log('Navigating to:', to.path)
  next()
})

router.afterEach((to, from) => {
  // 全局后置钩子
  console.log('Navigated to:', to.path)
})