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 = falsenew 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)
})