vue3.x router

### Vue 3.x Router 使用指南 #### 路由安装与配置 对于基于 Vue 3 的项目，推荐使用 `vue-router` 版本 4 及以上。首先，在项目中安装 `vue-router`： ```bash npm install vue-router@next ``` 接着初始化路由实例并将其挂载至应用根组件上[^2]。 ```javascript // main.js or main.ts import { createApp } from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) app.mount('#app') ``` 定义路由表时可以通过对象字面量的方式指定路径映射关系以及对应的视图组件。 ```javascript // router/index.js 或 index.ts import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' import AboutView from '../views/AboutView.vue' const routes = [ { path: '/', name: 'home', component: HomeView, }, { path: '/about', name: 'about', component: AboutView, } ] const router = createRouter({ history: createWebHistory(), routes, }) export default router ``` #### 动态路由匹配 动态参数允许 URL 中的部分内容作为变量传递给目标页面。例如访问 `/user/john` 和 `/user/mike` 都会指向同一个用户详情页，只是显示不同的用户名信息[^1]。 ```javascript { path: '/user/:id', // :id 是占位符名 name: 'User', component: UserComponent, } ``` 在组件内部获取动态参数的方法如下所示: ```javascript setup() { const route = useRoute() console.log(route.params.id); // 输出当前用户的 ID return {} } ``` #### 导航守卫 导航守卫提供了一系列钩子函数用来拦截导航操作执行某些逻辑前后的处理工作，比如权限验证、加载指示器控制等。 全局前置守卫会在每次跳转之前触发；局部前置守卫则只影响特定组件内的链接切换行为；而组件内守卫则是指那些专门针对单个组件设置的进入离开回调方法。 ```javascript // 全局前置守卫 router.beforeEach((to, from, next) => { document.title = to.meta.title || '默认标题'; next(); }); // 组件内守卫 export default { beforeRouteEnter(to, from, next) { // 此处无法直接访问 this 实例 next(vm => { vm.fetchData(); // 进入该组件时调用数据请求接口 }); }, async beforeRouteUpdate(to, from, next) { await fetchData(to.params); next(); }, beforeRouteLeave(to, from, next) { const answer = window.confirm('Do you really want to leave?'); if (answer) { next(); } else { next(false); } } }; ``` #### 解决常见问题 ##### 页面刷新丢失状态 当浏览器刷新时，默认情况下 Vuex 存储的状态会被重置。为了避免这种情况发生，可以考虑采用本地存储机制保存重要数据，或者利用服务端渲染 SSR 方案保持 session 持续性。 ##### 参数变化不更新视图 如果发现路由中的查询字符串或哈希值改变但是视图没有相应地重新渲染，则可能是因为缺少对这些属性变动监听的支持。此时可以在 watch 属性里加入对应字段监视其更改事件，并手动触发表格或其他 UI 更新动作。 ##### 编程式导航失败 确保编程方式下的 push/pop 方法被正确调用并且传参无误。另外注意区分 replace 与 push 的区别——前者不会向历史记录堆栈增加新条目而是替换掉现有位置，后者则相反。