1.全局事件总线 Global Event Bus
全局事件总线是 Vue 中一种用于组件之间进行通信的模式。它基于 发布-订阅（Pub/Sub）模式，让不同的组件可以通过事件触发和监听来相互传递信息，而不需要直接的父子关系或通过 Vuex 这样的状态管理来实现。
事件总线实际上是一个 空的 Vue 实例，它作为一个中央事件调度器，用来在多个组件之间传递消息。组件通过 $emit 来发布事件，其他组件通过 $on 来订阅事件。
简单来说，事件总线是一个“中介”，它监听组件发出的事件，并通知其他组件这些事件的发生。
创建：
// main.js
import Vue from 'vue';const EventBus = new Vue(); // 创建一个空的 Vue 实例作为事件总线Vue.prototype.$bus = EventBus; // 将 EventBus 添加到 Vue 的原型链上，供全局访问
发送：
在需要发送事件的组件中，使用 bus.$emit 来发布事件。$emit 的第一个参数是事件的名称，后续参数是事件的数据。
其他组件（可以是父组件或者其他子组件）使用 $bus.$on 来订阅事件。每当事件被发布时，所有监听该事件的组件都会接收到通知。
在组件销毁时，解绑事件监听器 是非常重要的，否则会导致内存泄漏。我们可以通过 $off 方法来移除事件监听。(通常会在 beforeDestroy 生命周期钩子中进行解绑操作)
全局事件总线 是一种通过发布-订阅模式来实现 Vue 组件间通信的机制。它通过 $emit 发送事件，通过 $on 监听事件。
优点：简单、解耦，适合小型或中等规模的应用。
缺点：可能导致维护困难和潜在的内存泄漏，对于大型应用而言，Vuex 是更好的选择。
替代方案：对于复杂的组件间通信，推荐使用 Vuex 来集中管理状态和逻辑。
2.Vuex
什么是Vuex
Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式，它采用 集中式存储 来管理所有组件的状态，保证状态以一种可预测的方式发生变化。Vuex 最适合用于中大型应用，它提供了一个非常清晰的方式来管理组件间的共享状态，并确保所有组件都能以一种统一的方式访问和修改状态。
Vuex 的核心思想是将应用的所有状态保存在一个中央存储中，允许组件通过派发（dispatch）行为来改变状态，并自动更新所有依赖状态的组件。
Vuex 提供了四个核心概念来管理状态：
- State（状态）：用于存储应用的所有共享状态。所有组件共享的状态存放在这里。
- Getters（计算属性）：用于从 Vuex 的 state 中派生出一些状态，类似于 Vue 的计算属性（computed）。
- Mutations（变更）：用来同步修改 state 的方法，Vuex 要求所有的状态变更必须通过 mutations 来进行。
- Actions（行为）：与 mutations 类似，但 actions 是异步操作，通常用于处理异步请求（比如调用 API），然后通过 mutations 更新 state。
使用：
- 使用createStore来创建一个store实例，包含
state、getters、mutations、actions四部分。state用于定义参数，getters用于实现计算属性，mutations用于修改state，actions用于处理异步请求，然后使用mutations修改state。 - 在 Vue 组件中，可以通过
this.$store访问 Vuex 的 state、getters、mutations 和 actions。 - 要在 Vue 根实例中引入并注册 store。
import { createApp } from 'vue'
import { createStore } from 'vuex'// 创建一个新的 store 实例
const store = createStore({state () {return {count: 0}},mutations: {increment (state) {state.count++}}
})
const app = createApp({ /* 根组件 */ })
// 将 store 实例作为插件安装
app.use(store)
Vuex的四个状态
- state：是 Vuex 中存储应用数据的地方。它类似于组件的 data，但是 state 中的数据是可以在多个组件中共享的。通过
this.$store.state.dataname访问。 - getters： 用来从 state 中派生出一些数据，类似于 Vue 的计算属性。getters 允许我们从 state 中获取计算结果，避免在多个组件中重复计算。
getters: { doubleCount: state => state.count * 2}。通过store.getters.name访问。 - mutations： 用于同步修改 state 中的数据。Vuex 强制要求通过 mutations 修改 state，这样可以保证状态的变更是可追踪的。mutations 的调用通过 commit 来实现，传入方法名和参数。
this.$store.commit('mutations_name');。mutation 必须是同步函数。 - actions： 用于处理异步操作或包含复杂逻辑的操作。actions 通过 commit 调用 mutations 来修改 state（直接在acitions的一个函数体里边：
commit('mutations_name')）。actions 的调用通过 dispatch 来实现。this.$store.dispatch('incrementAsync');
四个辅助函数
mapState 函数接受一个数组或对象作为参数，将 Vuex 的 state 映射为组件的计算属性 computed。有两种常见的使用方式：数组语法 和 对象语法。mapState 用于将 Vuex 的 state 映射到组件的 computed 属性。这样，你就可以直接在组件中使用 Vuex 中存储的状态，而不需要手动访问 this.$store.state。
mapState 作为 Vuex 和组件的桥梁，会将 state 映射到组件的 computed 属性。由于 Vuex 的 state 是响应式的，因此当 state 发生变化时，组件中的映射也会自动更新，触发视图更新。
你不需要手动更新 state，mapState 会确保你在模板中使用的是最新的状态。
import { mapState } from 'vuex';
// 数组
export default {computed: {// 使用 mapState 映射 Vuex state 到 computed...mapState(['count', // 映射 Vuex state 中的 count'userInfo' // 映射 Vuex state 中的 userInfo])}
};// 对象
export default {computed: {// 使用对象语法映射 state...mapState({countFromStore: 'count', // 将 Vuex 的 count 映射到 computed 的 countFromStoreuserName: 'userInfo.name', // 将 Vuex 的 userInfo.name 映射到 computed 的 userName})}
};// 结合模块
export default {computed: {// 映射 moduleA 模块中的 state...mapState('moduleA', ['count', // 映射 moduleA 中的 count'userInfo' // 映射 moduleA 中的 userInfo])}
};
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性；mapGetters 用于将 Vuex 的 getters 映射到组件的 computed 属性。getters 是从 state 派生出来的计算属性，可以在 state 上进行额外的计算和处理，类似于 Vue 的计算属性。
export default {// ...computed: {// 使用对象展开运算符将 getter 混入 computed 对象中...mapGetters(['doneTodosCount','anotherGetter',// ...])}
}
mapActions 用于将 Vuex 的 actions 映射到组件的 methods 中。actions 主要用于处理异步操作（例如 API 请求），并且可以通过 commit 提交 mutations 来改变 state。mapActions 可以将这些 actions 映射为组件的 methods，让你在组件中直接调用它们。
mapMutations：将 Vuex mutations 映射到组件的 methods 中，简化组件对同步变更状态的调用。
模块
Vuex 提供了模块化功能，可以将 state、mutations、actions 等分开到不同的模块modules中。每个模块有自己的 state 和 mutations，也可以嵌套子模块。modules:{module_name1:{一个小型store}}。这样访问的时候：
// 获取模块内的 state
console.log(this.$store.state.moduleA.count);// 调用模块内的 mutation
this.$store.commit('moduleA/increment');// 调用模块内的 action
this.$store.dispatch('moduleA/incrementAsync');
在 Vuex 中，动态注册模块 允许你在应用运行时，根据需要加载某些模块，而不是在初始化时就将所有模块都加载到 Vuex store 中。这样做可以提高应用的性能，特别是在大型应用中，只有在需要时才加载相关的模块，避免不必要的开销。
在 Vuex 中，使用 store.registerModule 方法来动态注册模块。动态注册的模块可以是 Vuex 模块的完整配置，包括 state、mutations、actions 和 getters，也可以带有命名空间。
const moduleA = {namespaced: true,state: () => ({count: 0}),mutations: {increment(state) {state.count++;}},actions: {incrementAsync({ commit }) {setTimeout(() => {commit('increment');}, 1000);}}
};// 动态注册带命名空间的模块
this.$store.registerModule('moduleA', moduleA);// 在组件中访问模块的 state
console.log(this.$store.state.moduleA.count);
卸载模块：
this.$store.unregisterModule('moduleA');
使用要求
Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：
- 应用层级的状态应该集中到单个 store 对象中。
- 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
- 异步逻辑都应该封装到 action 里面。
- 如果你的 store 文件太大，只需将 action、mutation 和 getter 分割到单独的文件。
modules下的store不用写，直接export，然后再index里createStore，modules。
可以通过调用 useStore 函数，来在 setup 钩子函数中访问 store。这与在组件中使用选项式 API store访问 this.$store 是等效的。
插件
在 Vuex 中，插件（plugins） 是用于增强 Vuex store 功能的工具。通过插件，您可以在每次 mutation 发生时执行特定操作，或为 Vuex store 提供额外的功能。Vuex 插件是一个函数，接受 store 作为参数，并可以访问到 store.state、store.commit 等内容。插件可以用于多种场景，例如：持久化状态、调试、日志记录等。
插件可以在创建 Vuex store 时通过 plugins 选项进行安装。意思是插件中的操作会在父store中执行。
const loggerPlugin = (store) => {store.subscribe((mutation, state) => {console.log(`[Mutation] ${mutation.type}`, mutation.payload);console.log('New state:', state);});
};const store = new Vuex.Store({state: { count: 0 },mutations: {increment(state) {state.count++;}},plugins: [loggerPlugin]
});
热重载
热重载（Hot Reload） 允许在不刷新整个页面的情况下，实时更新代码的改变。这样，开发者可以在不丢失应用状态的情况下，快速查看和测试代码修改，极大地提升开发效率。
热重载通常与 热模块替换（HMR, Hot Module Replacement） 一起使用。HMR 允许你替换正在运行的应用中的某一模块，而无需重新加载整个页面。对于前端开发，热重载能够确保界面、状态以及页面上下文的持久性，避免了传统“全页刷新”所带来的丢失用户输入、滚动位置等问题。
在 Vuex 中，热重载通常是指对 Vuex store 配置进行更新时，能够在不刷新页面的情况下重新加载新的 store 配置（比如 mutations、actions 或 state）。
// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count++;}}
});if (module.hot) {// 如果 Webpack 的 HMR 功能已启用module.hot.accept(['./modules'], () => {// 在这里你可以重新加载模块或者 Vuex storeconst newModules = require('./modules').default;store.hotUpdate({modules: newModules});});
}export default store;
module.hot.accept 是 Webpack 提供的一个 API，允许开发者在开发过程中使用热模块替换（HMR）机制来接收一个模块的更新，而不需要重新加载整个页面。换句话说，当一个模块发生变化时，Webpack 会自动将这个模块的更新替换到当前页面，而不是重新加载整个页面。
store.hotUpdate 是 Vuex 提供的一个 API，它用来更新已经注册的 Vuex store 模块。通过 store.hotUpdate，我们可以动态地替换 Vuex store 中的某个模块，确保即使是动态注册的模块也可以通过热重载机制被更新。
3.Vue Router
基本介绍
Vue Router 是 Vue 官方的客户端路由解决方案。
客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。在现代的单页面应用（SPA）中，路由通常在客户端处理。这意味着整个页面在加载初期就被加载下来，页面的更新通过JavaScript控制，而不是重新从服务器加载整个页面。
在Web应用程序中，路由用于定义不同的请求地址（URL）对应的处理程序，即当用户访问特定的URL时，由哪部分代码或哪个页面来响应这个请求。
当你在浏览器中输入一个地址或点击一个链接时，你的浏览器会向服务器发送一个请求。路由的工作就是解析这个请求，查看请求的URL，然后决定由哪个部分来处理这个请求。在客户端应用（如单页应用）中，这个过程往往是在浏览器内部完成的，而不是每次都向服务器发送请求。
一个路由就是一组映射关系（key - value）：key为路径，value可能是function或componen
后端路由：value是function，用于处理客户端提交的请求；服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据
前端路由：value是component，用于展示页面内容；当浏览器的路径改变时，对应的组件就会显示
Vue Router 支持两种路由模式：
- hash：使用 URL 的 hash 来模拟一个完整的 URL，当 URL 改变时，页面不会重新加载。这是默认模式。
- history：利用 HTML5 History API 和服务器配置，提供真实的 URL。这种模式要求服务器能够对所有路由都返回同一个 index.html 页面。
Hash 模式利用 URL 的哈希（即 URL 中的 # 符号后面的部分）来模拟完整的 URL 路径。哈希值的变化不会导致浏览器向服务器发送请求，页面不会重新加载，但哈希的改变会触发页面跳转，并且哈希变化会被浏览器的历史记录所跟踪。通过window.onhashchange监视哈希值的变换。
History 模式利用 HTML5 的 History API （特别是 pushState 和 replaceState 方法，向浏览器的历史记录栈中添加一个新的状态或替换一个状态）来完成 URL 的跳转而无需重新加载页面。这种模式需要服务器的支持，以确保用户直接访问或刷新时，服务器能够返回对应的页面。
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。要改成history：
const router = new VueRouter({mode: 'history',routes: [...]
})
基本使用
创建路由器实例：
路由器实例是通过调用 createRouter() 函数创建的:
import { createMemoryHistory, createRouter } from 'vue-router'import HomeView from './HomeView.vue'
import AboutView from './AboutView.vue'const routes = [{ path: '/', component: HomeView },{ path: '/about', component: AboutView },
]const router = createRouter({history: createMemoryHistory(),routes,
})
routes 选项定义了一组路由，把 URL 路径映射到组件。其中，由 component 参数指定的组件就是先前在 App.vue 中被 <RouterView> 渲染的组件。这些路由组件通常被称为视图。
import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入vue-router
import Hello from '@/components/Hello' //引入根目录下的Hello.vue组件Vue.use(Router) //Vue全局使用Routerexport default new Router({routes: [ //配置路由，这里是个数组{ //每一个链接都是一个对象path: '/', //链接路径name: 'Hello', //路由名称，component: Hello //对应的组件模板}，{path:'/hi',component:Hi,children:[ //子路由,嵌套路由 （此处偷个懒，免得单独再列一点）{path:'/',component:Hi},{path:'hi1',component:Hi1},{path:'hi2',component:Hi2},]}]
})
注册路由器插件：
一旦创建了路由器实例，就需要将其注册为插件，这一步骤可以通过调用 use() 来完成。
createApp(App).use(router).mount('#app')
use() 需要在 mount() 之前调用。它的职责包括：
- 全局注册
RouterView和RouterLink组件。 - 添加全局
$router和$route属性。 - 启用
useRouter()和useRoute()组合式函数。 - 触发路由器解析初始路由。
每个组件都有自己的$route属性，里面存储着自己的路由信息；整个应用只有一个router，可以通过组件的$router属性获取到。
多级路由：
配置路由规则，使用children配置项：
routes:[{path:'/about',component:About,},{path:'/home',component:Home,children:[ // 通过children配置子级路由{path:'news', // 此处一定不要带斜杠，写成 /newscomponent:News},{path:'message', // 此处一定不要写成 /messagecomponent:Message}]}
]
router-view
<router-view>用于显示当前路由对应的组件内容。可以看作路由出口，用于显示匹配当前 URL 的视图。作为一个容器组件，它的主要功能是根据当前的路由地址动态渲染对应的组件。
在 Vue Router 中，<router-view> 的行为遵循以下规则：
动态渲染：<router-view> 根据当前的路由地址动态渲染对应的组件。
占位符：如果没有匹配到任何组件，<router-view> 就像一个空的占位符，不显示任何内容。
层级显示：在嵌套路由配置中，每个 <router-view> 显示对应层级的组件。父路由的 <router-view> 显示父组件，每个子路由的 <router-view> 显示相应的子组件。
默认子路由：为避免 <router-view> 为空，可以配置一个默认的子路由。当访问父路由时，自动重定向或加载一个默认的子组件。
const routes = [{path: '/dashboard',component: DashboardLayout,children: [{ path: '', redirect: 'welcome' }, // 默认子路由{ path: 'welcome', component: DashboardWelcome },{ path: 'settings', component: Settings, children: [...] }]}
];嵌套路由：
const routes = [{path: '/dashboard',component: DashboardLayout, // 主仪表板布局组件children: [{path: 'settings',component: Settings, // 设置页面组件children: [{path: 'profile',component: ProfileSettings // 个人资料设置组件}]}]}
];在更复杂的布局中，可能需要同时展示多个视图，而不是仅仅替换单一的 <router-view>。Vue Router 允许通过命名视图来同时展示多个视图。
const router = new VueRouter({routes: [{path: '/',components: {default: Home,sidebar: Sidebar,footer: Footer}}]
});
<router-view></router-view> <!-- 渲染主视图 (Home) -->
<router-view name="sidebar"></router-view> <!-- 渲染侧边栏 (Sidebar) -->
<router-view name="footer"></router-view> <!-- 渲染底部 (Footer) -->
- name属性：当使用命名视图时，可以通过 name 属性指定哪个
<router-view>应该渲染哪个命名路由。默认情况下，不带 name 的<router-view>会渲染默认路由视图。 - key 属性：可以用来控制
<router-view>组件的重用。视图在路由参数改变时重新渲染，而不是重用。 - 动态属性传递 (props)属性：直接从路由向组件传递 props，而不是使用 $route 来访问参数和查询。Vue Router 允许你将路由参数映射到组件的 props 上。
<keep-alive> 包裹动态组件时，可以缓存非活动组件的实例，而不是销毁它们。当组件在 中再次渲染时，它的状态将会被保留，包括组件的数据、计算属性和组件树的状态（如 DOM 状态或组件生命周期）
router-link
使用 <router-link> 而不是普通的 <a> 标签可以让页面的跳转无需重新加载。<router-link> 提供了一种声明式的方法来定义应用内的导航。与编程式导航（通过 $router.push 或 $router.replace）相比，<router-link> 是通过特定的语法直接在模板中声明。点击 <router-link> 生成的链接时，Vue Router 会阻止浏览器执行默认的页面重新加载行为，然后利用 HTML5 History API 或者哈希模式来改变URL，而不会刷新页面。
- to属性：导航路径，要填写的是你在router/index.js文件里配置的path值
类型：string | Location
用途：定义路由的目标 URL。可以是一个字符串，或者是一个描述目标位置的对象，例如 { name: ‘user’, params: { userId: 123 }}。
示例：
<router-link to="/about">About</router-link>
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
- replace：(boolean) 点击链接后，使用 router.replace() 而不是 router.push()，不会留下历史记录。
<router-link to="/location" replace></router-link> - append：(boolean) 设置后，路径会被视为相对路径，并相对于当前路径进行解析。
- tag：(string) 指定渲染成哪种标签，默认为
<a>标签。 - active-class 和 exact-active-class：(string) 指定当链接处于激活状态时应用的 CSS 类名。active-class 默认为 router-link-active，用于路径匹配时；exact-active-class 默认为 router-link-exact-active，用于路径完全匹配时。
- event：(string |
Array<string>) 定义触发路由导航的事件，默认是 ‘click’。可设置为例如 ‘mouseover’ 来改变触发方式。
当 <router-link> 被点击时，Vue Router 内部调用 router.push 或 router.replace 来改变 URL，这依赖于 replace 属性的设置。
Vue Router 监听 URL 的变化，并根据当前的 URL 通过内部的路由表找到匹配的组件。
找到匹配的组件后，Vue Router 会将其渲染在对应的 <router-view> 中。
$router
router 指的是 Vue Router 的实例。这个实例是整个路由系统的核心，包含了所有的路由规则、配置和内部状态。它是通过 new VueRouter(options) 创建的，其中 options 包含了路由的配置信息，如模式、基础路径、路由定义等。
浏览记录本质是一个栈，默认push，点开新页面就会在栈顶追加一个地址，后退，栈顶指针向下移动，改为replace就是不追加，而将栈顶地址替换
编程式的导航
- router.push(location, onComplete?, onAbort?)
功能：向浏览器的历史堆栈中添加一个新的记录。当你调用 router.push() 时，它会在历史记录中添加一个新条目，因此当用户点击浏览器的后退按钮时，他们会返回到前一个URL。
this.$router.push({ path: `/user/${id}` });
this.$router.push({ name: 'user', params: { id: 42 } });
const routes = [{ path: '/user/:id', name: 'user', component: UserComponent }
];
- router.replace(location, onComplete?, onAbort?)
功能：替换掉当前的历史记录。router.replace() 被调用时，它不会在历史记录中添加新条目，而是替换掉当前的历史条目。当用户点击浏览器的后退按钮时，他们会跳过当前页面，返回到之前的页面。
用途：适用于不需要再次访问当前页面的场景，如登录后跳转到一个新页面，你不希望用户回到登录页面。
历史记录的不同：push 会留下历史记录，允许用户通过后退按钮回到前一个页面；replace 不会留下当前页面的历史记录，用户后退时会跳过当前页面。
- router.go(n)
在历史栈中前进或后退指定的步数。this.$router.go(-1)后退一步；this.$router.go(1)前进一步。
虽然 $route 是获取当前路由状态的主要方式，但 $router 提供了一些全局的方法和属性，用于管理整个路由系统。this.$router.currentRoute 和 his.$route 是等价的，都是当前激活的路由对象。
-
addRoute(record)
动态添加一个路由规则。 -
removeRoute(name)
动态移除一个路由规则。 -
hasRoute(name)
检查是否存在某个路由。
路由守卫
全局路由守卫用于监听整个应用的路由变化。在 Vue Router 实例中可以通过 beforeEach、beforeResolve、afterEach 等方法定义全局守卫。
- beforeEach 守卫：在每次路由跳转前调用。可以通过 next() 控制导航，next(false) 可以取消导航，next(‘/’) 可以跳转到其他路径。
- beforeResolve 守卫：与 beforeEach 相似，但在所有异步路由组件被解析之后调用。它比 beforeEach 更晚触发，允许在路由组件解析完成后进行一些操作（例如：数据加载）。
- afterEach 守卫：路由跳转完成后调用，且不会阻止导航。它不能通过 next() 来控制导航，主要用于进行日志记录、统计等操作。
const router = new VueRouter({routes: [{ path: '/home', component: Home },{ path: '/login', component: Login }]
});router.beforeEach((to, from, next) => {// 检查用户是否已登录if (to.path !== '/login' && !isAuthenticated()) {next('/login'); // 如果用户未登录，跳转到登录页面} else {next(); // 允许访问目标路由}
});
- beforeEnter 守卫：在路由进入之前调用，且只在该路由的匹配过程中生效。用于在路由进入前执行权限控制、数据加载等操作。
- beforeRouteEnter 守卫：在路由进入之前触发，导航还未被确认。此时，组件还未被创建，无法访问 this。可以用来做数据获取或其他在组件进入前的操作。
- beforeRouteUpdate 守卫：当当前路由地址变化，但路由组件已存在时（即组件复用时），此守卫会被调用。适用于组件内路由的参数变化时，比如路由的 params 发生变化时。
- beforeRouteLeave 守卫：当路由离开时触发。适用于用户离开当前路由时做一些清理工作，或者警告用户未保存的操作。可以用于显示提示框、保存未保存的数据等。
路由懒加载
路由懒加载是指在用户访问某个特定路由时才加载对应的组件，而不是一开始就加载所有路由的组件。懒加载的核心思想是通过动态 import 来加载路由组件。在用户访问某个路由时，才加载该路由所对应的组件，而不是在页面加载时就加载所有的组件。import() 是 JavaScript 的动态导入语法，它会返回一个 Promise 对象。Vue 在使用这个语法时，会自动拆分出独立的 JavaScript 文件，只有在访问相应的路由时才会加载这个文件。这就实现了按需加载。
const router = new VueRouter({routes: [{path: '/home',component: () => import('./components/Home.vue') // 使用懒加载},{path: '/about',component: () => import('./components/About.vue') // 使用懒加载}]
});
还可以为懒加载的组件添加 loading 状态和 错误处理，来优化用户体验。
const router = new VueRouter({routes: [{path: '/home',component: () => ({// 组件加载时显示的加载状态component: import('./components/Home.vue'),loading: LoadingComponent, // 加载中的组件error: ErrorComponent, // 错误时的组件delay: 200, // 延迟显示加载组件timeout: 3000 // 超过3秒超时})}]
});
route
Route 指的是当前激活的路由的状态信息，通常在组件内通过 this.$route 访问。它是一个包含了当前 URL 解析得到的信息，如路径（path）、参数（params）、查询字符串（query）等的对象。
动态路由匹配：
- 在路由路径中定义占位符（例如 :id），并根据实际的 URL 提取参数传递给组件。
- 动态参数会被添加到
$route.params对象中，可以在组件中通过this.$route.params。 - 使用
*捕获所有路径，可以用来实现 404 页面或者动态路由嵌套。 - 可以加正则表达式，加
?表示可选参数。 - 嵌套动态参数，params对象就有多个键值对（这个不嵌套）。
- 动态路由与编程式导航：replace同理。
主要属性：
- path：字符串，对应当前路由的路径，总是解析为绝对路径。
- params：一个包含路由参数的对象。这些参数来自路径中的动态片段。路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置。
- query：一个包含查询参数的对象，即 URL 中 ? 后的参数。
- hash：URL 中的 hash 片段（# 后的部分）。
- fullPath：完整解析后的 URL，包含查询参数和 hash 的完整路径。
- matched：一个数组，包含当前路由的所有嵌套路径片段的路由记录。路由记录就是 routes 配置数组中定义的对象的副本。每个记录对象表示一个路由的匹配，包含了 path、component、name 等信息。
- name：string | null，当前路由的名称（如果路由配置时有设置 name）。如果没有指定名称，则为 null。
传递参数：
<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">跳转</router-link>
<!-- 跳转并携带query参数，to的对象写法（推荐） -->
<router-link :to="{path:'/home/message/detail',query:{id: m.id,title: m.title}}"
>跳转</router-link>
接收参数：
$route.query.id
$route.query.title
props作用：让路由组件更方便的收到参数
{name:'xiangqing',path:'detail/:id',component:Detail,//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件// props:{a:900}//第二种写法：props值为布尔值，为true时，则把路由收到的所有params参数通过props传给Detail组件// props:true//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件props($route){return {id: $route.query.id,title: $route.query.title}}
}
重定向和别名
重定向也是通过 routes 配置来完成：重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b
const router = new VueRouter({routes: [{ path: '/a', redirect: '/b' }]
})const router = new VueRouter({routes: [{ path: '/a', redirect: { name: 'foo' }}]
})const router = new VueRouter({routes: [{ path: '/a', redirect: to => {// 方法接收 目标路由 作为参数// return 重定向的 字符串路径/路径对象}}]
})
的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。
const router = new VueRouter({routes: [{ path: '/a', component: A, alias: '/b' }]
})
https://v3.router.vuejs.org/zh/installation.html