⚡ 30 秒速记
- 路由管理地址到组件的映射
- 状态存储管理共享数据和变更入口
- 主动导航与浏览器后退都要通知界面
- 路由参数变化不必然重建组件
- 地址状态与业务状态各自明确归属
路由和状态管理都能驱动页面，但负责的问题不同：一个决定现在看哪页，一个决定业务数据是什么。 路由器维护当前位置并匹配组件，历史导航事件和主动跳转都要同步这份位置。共享存储则通过受控操作改变响应式数据。搜索条件若需要分享和后退恢复，可以放进地址；临时弹窗状态未必需要，别把所有界面细节都塞到同一个地方。
版本校准： 本文出现 Object.defineProperty、Dep、Watcher 和双端 Diff 时，主要描述 Vue 2 实现；Vue 3 使用 Proxy、effect 与新的渲染器路径。Vue 2 已于 2023-12-31 结束维护，新项目应以 Vue 3 为基线，旧项目参考 Vue 2 EOL 官方说明 制定迁移与安全策略。
# vue-router
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单⻚面应用变得易如反 掌。
安装: vue add router 核心步骤:
- 步骤一:使用vue-router插件，router.js
import Router from 'vue-router'
Vue.use(Router)
- 步骤二:创建Router实例，router.js
export default new Router({...})
- 步骤三:在根组件上添加该实例，main.js
import router from './router'
new Vue({
router,
}).$mount("#app");
- 步骤四:添加路由视图，
App.vue
<router-view></router-view>
导航
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
# vue-router源码实现
- 作为一个插件存在:实现
VueRouter类和install方法 - 实现两个全局组件:
router-view用于显示匹配组件内容，router-link用于跳转 - 监控
url变化:监听hashchange或popstate事件 - 响应最新
url:创建一个响应式的属性current，当它改变时获取对应组件并显示
创建kvue-router.js
