vue-router（vue 路由）基本使用指南（二）

优质文章学习记录

— 10 min read
vue-router（vue 路由）基本使用指南（二）

文章目录

深入使用

导航守卫

导航守卫用于在路由跳转前、跳转后或解析过程中，添加自定义的逻辑处理，例如权限验证。

    • to 和 from 是即将进入的目标路由和当前导航正要离开的路由
    • next 是一个函数，该函数用于控制路由的跳转。
    • next()：继续执行路由。
    • next(false)：中断当前路由，如果浏览器的 URL 改变了，那么 URL 会回到 from 路由。
    • next(‘/path’)：跳转到指定路径。
    • next(error)：将控制权交给 router.onError()。

组件内守卫

exportdefault{beforeRouteEnter(to,from, next){// 在路由进入前调用next();},beforeRouteUpdate(to,from, next){// 在当前路由改变，但组件被复用时调用next();},beforeRouteLeave(to,from, next){// 在路由离开前调用next();},};

路由独享守卫

const routes =[{ path:'/admin', component: Admin,beforeEnter:(to,from, next)=>{// 仅管理员可访问if(isAdmin()){next();}else{next('/login');}},},];

全局后置钩子全局后置钩子通过 router.afterEach 方法设置，它不会接收 next 函数也不会改变导航本身：

router.afterEach((to,from)=>{// 在这里你可以访问路由守卫结束后的状态，但不能改变状态。 console.log('路由已切换');// 例如，记录日志或者统计页面访问等。});

全局解析守卫全局解析守卫通过 router.beforeResolve 方法设置，它在所有组件内守卫和异步路由组件被解析之后调用。

router.beforeResolve((to,from, next)=>{// 类似于 beforeEach，但是在这个守卫中，所有组件内守卫和异步路由组件被解析之后调用。});

全局前置守卫

router.beforeEach((to,from, next)=>{// 例如，验证用户是否已登录if(to.path ==='/protected'&&!isLoggedIn()){next('/login');// 跳转到指定路径}else{next();// 继续执行路由}});

## 嵌套路由

嵌套路由用于构建具有层级关系的页面结构，即在一个组件内部再嵌套另一个路由视图。

详见：传送门

在父组件模板中

<template> <div> <h2>用户页面</h2> <router-view></router-view> <!-- 渲染子路由组件 --> </div> </template>

定义嵌套路由

const routes =[{ path:'/user', component: User, children:[{// 当/user/profile匹配成功，UserProfile将被渲染到User的<router-view>内部 path:'profile', component: UserProfile,},{ path:'posts', component: UserPosts,},],},];

注意，以 / 开头的嵌套路径将被视为根路径。这允许你利用组件嵌套，而不必使用嵌套的 URL

重定向与别名

重定向：也是通过 routes 配置来完成

    • 导航守卫并没有应用在跳转路由上，而仅仅应用在其目标上。在上面的例子中，在 /home 路由中添加 beforeEnter 守卫不会有任何效果。
    • 在写 redirect 的时候，可以省略 component 配置，因为它从来没有被直接访问过，所以没有组件要渲染。唯一的例外是嵌套路由：如果一个路由记录有 children 和 redirect 属性，它也应该有 component 属性。

相对重定向：重定向到相对位置

const routes =[{// 将总是把/users/123/posts重定向到/users/123/profile。 path:'/users/:id/posts',redirect:to=>{// 该函数接收目标路由作为参数return to.path.replace(/posts$/,'profile')},},]

示例：

const routes =[{ path:'/home', redirect:'/'}]const routes =[{ path:'/home', redirect:{ name:'homepage'}}]const routes =[{// /search/screens -> /search?q=screens path:'/search/:searchText',redirect:to=>{// 方法接收目标路由作为参数// return 重定向的字符串路径/路径对象return{ path:'/search', query:{ q: to.params.searchText }}},},{ path:'/search',// ...},]

注意

别名

如果路由有参数，需确保在任何绝对别名中包含它们：

const routes =[{ path:'/users/:id', component: UsersByIdLayout, children:[// 为这3个URL（/users/24、/users/24/profile、/24）呈现 UserDetails{ path:'profile', component: UserDetails, alias:['/:id','']},],},]

通过别名，可以自由地将 UI 结构映射到一个任意的 URL，而不受配置的嵌套结构的限制。使别名以 / 开头，以使嵌套路径中的路径成为绝对路径。甚至可以将两者结合起来，用一个数组提供多个别名：

const routes =[{ path:'/users', component: UsersLayout, children:[// 为这3个URL（/users、/users/list、/people）呈现 UserList{ path:'', component: UserList, alias:['/people','list']},],},]

将 / 别名为 /home，意味着当用户访问 /home 时，URL 仍然是 /home，但会被匹配为用户正在访问 /。重定向是指当用户访问 /home 时，URL 会被 / 替换，然后匹配成 /。

const routes =[{ path:'/', component: Homepage, alias:'/home'}]

history 配置：指定历史模式

    • 内部传递的实际 URL 之前会加一个井号（#）（如 http://example.com/#/home）
    • 无需服务器配置（所有URL，包括是不存在的，都不会被发送到服务器），适合纯前端单页应用（SPA）
    • 不过，它在 SEO 中确实有不好的影响。如果担心这个问题，可以使用 HTML5 模式。
  • createWebHistory()：history 模式 / HTML5 模式
    • url 更简洁（如 http://example.com/home），无 #
    • 需要服务器支持（避免 404 错误，需配置回退到 index.html）
    • 适合需要 seo 或对 url 美观有要求的项目：
  • createMemoryHistory()：Memory 模式
    • Memory 模式不会假定自己处于浏览器环境，因此不会与 URL 交互也不会自动触发初始导航
    • 需要在调用 app.use(router) 之后手动 push 到初始导航
    • 虽然不推荐，但仍可以在浏览器应用程序中使用此模式注意：它不会有历史记录，这意味着无法后退或前进
    • 非常适合 Node 环境和 SSR

createWebHashHistory()：Hash 模式（默认模式）

import{ createRouter, createWebHashHistory }from'vue-router'const router =createRouter({ history:createWebHashHistory(), routes:[...],})

路由元信息（meta）

路由配置中可以添加元信息（meta），例如权限控制、页面标题等。

全局导航守卫中使用：

router.beforeEach((to,from)=>{if(to.meta.requiresAuth &&!isAuthenticated()){return{ name:'Login'};}});

获取元信息：

<script setup>import{ useRoute }from'vue-router';const route =useRoute(); console.log(route.meta.title);// "控制面板"</script>

路由配置：

const routes =[{ path:'/dashboard', name:'Dashboard', component: Dashboard, meta:{ requiresAuth:true, title:'控制面板'}}];

拓展

状态管理（Pinia / Vuex）

Pinia / Vuex 介绍

对于复杂或跨页面的数据传递，推荐使用状态管理库（Pinia/Vuex）。

  • Vuex：Vuex 是 Vue.js 官方的状态管理库。采用了 Flux 的思想，提供了一个集中式存储，允许组件以不同的方式共享状态。核心概念：
    • State: 应用的状态存储。
    • Getters: 类似于计算属性，用于计算基于状态的派生状态。
    • Mutations: 处理状态的唯一方式，直接修改状态。
    • Actions: 进行异步操作，并提交 Mutations。
  • Pinia：Pinia 是一个新兴的状态管理库，也是 Vue.js 的官方推荐替代方案。它为 Vue 3 提供了一种更简单、更具灵活性的状态管理方式与 Vuex 相比，Pinia 在设计上更现代化，支持 Composition API，使得开发者在使用时更加方便。核心概念：
    • Store: 状态存储的基本单位，通过建立一个或多个 Store 来管理状态。
    • State: 用于保存应用的响应式状态。
    • Getters: 计算属性的延伸，基于状态计算派生值。
    • Actions: 包含了执行异步操作的行为和直接修改状态的方法。

Vuex vs Pinia

  • API 和易用性
    • Vuex：采用认证的 Flux 风格，有一定的学习曲线，需要掌握多个概念（状态、getter、mutation、action）。对于小型应用来说，可能会显得过于复杂。
    • Pinia：设计更为简单，结合了 Composition API，让开发者能够更直观地管理状态。尤其是 Vue 3 的 Setup 语法糖，使用更加直观。
  • 响应式
    • Vuex：响应式总是要依赖于 Vue 的响应式系统，并且有多种约定（例如 Mutation），使用中需要更小心。
    • Pinia：完全基于 Vue 3 的响应式系统，状态变化后组件自动更新，无需额外的处理。
  • DevTools 支持
    • Vuex：在 Vue DevTools 中支持非常好，可以很方便地进行状态的查看和时间旅行调试。
    • Pinia：同样也支持 Vue DevTools，且整体使用体验更友好。
  • 社区支持和生态
    • Vuex：由于是官方库，资料和插件相对丰富，很多现有的项目都是基于 Vuex 的。
    • Pinia：作为新兴库，其社区支持还在不断扩大，函数式编程风格吸引了一部分开发者，但整体生态仍需时间发展。

总结

Vuex 和 Pinia 各有优缺点，选择哪个库取决于你的项目需求和个人偏好。如果你正在开发一个较大型的应用，且已有 Vuex 的使用经验，那么继续使用 Vuex 可能是一个不错的选择。而如果你想要尝试一种更简单、现代化的方式，那么 Pinia 无疑是个值得尝试的选项。

Pinia 基本使用

    • pinia-plugin-persistedstate 为 pinia 的数据持久化插件

使用 Pinia

<template> <div> <p>Count: {{ count }}</p> <p>Double Count: {{ doubleCount }}</p> <button @click="increment">Increment</button> <button @click="incrementAsync">Increment Async</button> </div> </template> <script setup lang="ts"> import {computed} from "vue"; import {useUserStore} from '@/utils/store.js'; const counterStore = useUserStore() const count = computed(() => counterStore.count) const doubleCount = computed(() => counterStore.doubleCount) const increment = () => { counterStore.increment() } const incrementAsync = async () => { await counterStore.incrementAsync() } </script>

创建一个 Store

// store.jsimport{ defineStore }from'pinia';exportconst useCounterStore =defineStore('counter',{state:()=>({ count:0,}), getters:{doubleCount(state){return state.count *2;},}, actions:{increment(){this.count++;},asyncincrementAsync(){awaitnewPromise((resolve)=>setTimeout(resolve,1000));this.count++;},}, persist:{ enabled:true,// 启用持久化 storage: window.localStorage,// 存储到 localStorage(默认)/sessionStorage},});

在 main.ts 或 main.js 中初始化

import{ createApp }from'vue';import{ createPinia }from'pinia';import{ createPersistedState }from'pinia-plugin-persistedstate';const app =createApp(App);// 将状态管理器 pinia装入appconst pinia =createPinia(); pinia.use(createPersistedState());// 开启状态持久化 app.use(pinia); app.mount('#app');

安装 Pinia

npminstall pinia pinia-plugin-persistedstate

Pinia 使用 Cookies 存储

虽然Cookies主要用于存储少量数据，并且有大小限制（通常为4KB），但在某些情况下，也可以用于简单的持久化。

使用 Cookies 进行持久化时，需要手动处理数据的读写：

exportconst useUserStore =defineStore('user',{state:()=>({ name:null, age:null,}), actions:{setName(name){this.name = name; document.cookie =`name=${name}; path=/; max-age=3600`;},getName(){const name = document.cookie.split('; ').find(row=> row.startsWith('name='));if(name){this.name = name.split('=')[1];}},},});

Read more

跨越天堑：机器人脑部药物递送三大技术路径的可转化性分析研究

跨越天堑：机器人脑部药物递送三大技术路径的可转化性分析研究

摘要 血脑屏障是中枢神经系统药物研发最核心的瓶颈。尽管相关基础研究层出不穷，但“论文成果显著、临床转化缓慢”的悖论依然存在。本文认为，突破这一瓶颈的关键在于，将研究重心从“单点机制”转向构建一条“可验证、可复现、可监管”的全链条递送系统。为此，本文提出了一个衡量脑部递送技术可转化性的四维评价标尺：剂量可定义、闭环可监测、质控可标准化、可回退。基于此标尺，本文深度剖析了当前最具潜力的三条技术路径： （1）FUS/低强度聚焦超声联合微泡； （2）血管内可导航载体/机器人； （3）针对胶质母细胞瘤（GBM）的多功能纳米系统。 通过精读关键临床试验、前沿工程研究和系统综述，我们抽离出可直接写入临床或产品方案的核心变量，识别了各自面临的最大转化风险，并提出了差异化的“押注”策略。分析表明，FUS+MB路径因其在“工程控制”上的成熟度，在近期（12-24个月）的转化确定性最高；血管内机器人代表了精准制导的未来趋势，

前端大数据渲染性能优化：Web Worker + 分片处理 + 渐进式渲染

当你的页面需要解析和渲染大量数据时，用户可能会面对长时间的白屏等待。本文将介绍一种"Web Worker 分片处理 + 主线程渐进式渲染"的优化方案，让用户在数据加载过程中就能看到内容逐步呈现。 目录 1. 问题场景 2. 为什么传统方案不够好 3. 解决方案概述 4. 技术原理详解 5. 完整代码实现 6. 性能对比 7. 适用场景 8. 总结 问题场景 最近在做一个历史聊天记录恢复的功能，后端返回大量数据需要前端进行解析拼接在渲染到页面上，如果数据量大，聊天记录可能得十几秒才会显示，用户体验极差。我们需要解决的问题有两个，数据解析和DOM渲染 为什么传统方案不够好 方案一：直接同步处理 // ❌ 问题：阻塞主线程，页面完全卡死const transactions = rawData.map(item =>parseTransaction(item))setTransactions(

Selenium环境搭建完全指南：WebDriver版本匹配与生产级配置实践（Day 21-23）

引言：Web自动化的第一块多米诺骨牌 如果你曾尝试在深夜配置Selenium环境，大概率经历过这样的场景：满怀信心地写下webdriver.Chrome()，回车执行，浏览器窗口一闪而逝——秒退。紧接着是SSL握手失败的红色堆栈，GitHub Issue的彻夜鏖战，以及第二天早晨同事轻描淡写的一句“哦，你Chrome版本没对齐吧”。 环境搭建是Web自动化门槛最低、踩坑密度最高的环节。它不需要复杂的业务逻辑，却对细节有近乎偏执的要求：浏览器版本、驱动版本、系统架构、环境变量、二进制路径——任何一环脱节，整个自动化大厦便无从谈起。 Day 21-23的目标不是让你“跑通一个脚本”，而是建立对Selenium WebDriver底层交互机制的工程级认知。本文将从版本匹配的底层逻辑切入，覆盖跨平台配置、常见陷阱根治方案，并引入2026年主流的最佳实践工具链。读完本文，你将具备诊断并彻底解决环境问题的能力，而不再依赖“重装大法”。 一、Selenium WebDriver的本质：不只是“驱动” 1.1 拆解黑箱：WebDriver协议与浏览器内核 许多初学者将WebDriver误

Xinference-v1.17.1快速部署：GitHub Codespaces云端环境3分钟启动WebUI

Xinference-v1.17.1快速部署：GitHub Codespaces云端环境3分钟启动WebUI 1. 为什么这次更新值得你立刻试试？ Xinference-v1.17.1不是一次普通的小版本迭代。它把“开箱即用”这件事做到了新高度——你不需要本地装Python、不用配CUDA、甚至不用下载模型文件，只要一个浏览器，三分钟内就能看到完整的WebUI界面跑起来，还能直接和Qwen2、Phi-3、Gemma2这些热门模型对话。 更关键的是，它彻底打破了“换模型=重装环境”的老套路。以前想试试Llama3还是DeepSeek-V2，得反复改配置、删缓存、调参数；现在只需要改一行代码，GPT的调用逻辑就自动切换成任意开源LLM。这不是概念演示，是实打实能在云上跑、在笔记本跑、在边缘设备跑的生产级推理平台。 如果你试过用Ollama拉模型卡在99%、被vLLM的编译折磨到放弃、或者被FastChat的端口冲突搞崩溃……那这次，真的可以松一口气了。 2. 什么是Xinference？一句话说清它能帮你省多少事 Xinference（全称Xorbits Inference