wordpress 网站排名优化个人网站论文摘要

wordpress 网站排名优化,个人网站论文摘要,网站建设中单页代码,网站多少钱Vue Router 是 Vue 单页应用的核心#xff0c;但基础的页面切换只是入门 —— 实际开发中还需要处理导航高亮、页面重定向、404 错误、路由传参等场景。本文结合思维导图#xff0c;带你掌握 Vue Router 的进阶用法。 一、声明式导航#xff1a;更优雅的页面跳转 声明式导…Vue Router 是 Vue 单页应用的核心但基础的页面切换只是入门 —— 实际开发中还需要处理导航高亮、页面重定向、404 错误、路由传参等场景。本文结合思维导图带你掌握 Vue Router 的进阶用法。一、声明式导航更优雅的页面跳转声明式导航通过router-link标签实现替代传统a标签核心优势是自带 “导航高亮” 能力。1. 导航高亮自动标识当前路由router-link会自动给当前激活的路由添加类名默认类名是router-link-active模糊匹配和router-link-exact-active精确匹配。1两个类名的区别router-link-active模糊匹配如/goods会匹配/开头的路由router-link-exact-active精确匹配仅当路径完全一致时激活。示例template !-- 点击“商品页”时/goods会同时激活router-link-active和router-link-exact-active -- !-- router-link: VueRouter 提供的全局组件 必须提供 to 属性 1. 会自动加 # 2 可以很方便的实现导航高亮 -- router-link to/首页/router-link router-link to/goods商品页/router-link /template style /* router-link-active: 模糊匹配, 只要访问路径包含 a 标签的 href, 就会自动加上这个类名 (用得多) router-link-exact-active: 精确匹配, 必须要访问路径和 a 标签的 href 完全一致才会加上这个类名 (用得少) */ /* 自定义高亮样式 */ .router-link-exact-active { color: red; font-weight: bold; } /style2自定义高亮类名若不想用默认类名可通过active-class和exact-active-class自定义// 在index.js中importVuefromvueimportVueRouterfromvue-routerVue.use(VueRouter)constrouternewVueRouter({routes:[],// 自定义模糊匹配的类名linkActiveClass:active,// 自定义精确匹配的类名linkExactActiveClass:exact-active,})exportdefaultrouter使用时只需要用自己定义的类名即可style a.active { background-color: yellow; } /style2. 声明式导航传参携带数据跳转query传参是将参数拼接在 URL 的查询字符串中如/goods?id1name苹果特点是参数可见、可刷新保留。1 基本用法通过router-link的to属性传递对象形式的query参数template !-- 传参query参数会拼接在URL后 -- router-link :to{ path: /goods, // 目标路由路径 query: { id: 1, name: 苹果 } // 传递的参数 } 苹果详情 /router-link !-- 或使用这种方式 -- !-- router-link :to/goods?id1name苹果 苹果详情 /router-link -- /template2目标页面接收参数在目标组件中通过this.$route.query获取参数!-- Goods.vue -- script export default { mounted() { console.log(this.$route.query.id); // 输出1 console.log(this.$route.query.name); // 输出苹果 } }; /script3特点参数会显示在 URL 中支持刷新页面后保留适合传递非敏感、可选的参数如列表筛选条件。3. 声明式导航传参动态路由传参动态路由传参是将参数嵌入路由路径中如/goods/1特点是参数隐藏在路径中、语义化更强。1配置动态路由规则先在路由配置中定义动态路由参数以:开头// router/index.jsconstroutes[// 动态路由id是参数名{path:/goods/:id,name:Goods,component:Goods}];2声明式导航传递动态参数通过router-link的to属性传递动态参数template !-- 方式1直接拼接路径 -- router-link to/goods/2香蕉详情/router-link !-- 方式2结合命名路由更灵活 -- router-link :to{ name: Goods, // 对应路由的name params: { id: 3 } // 传递动态参数 } 橙子详情 /router-link /template3目标页面接收参数在目标组件中通过this.$route.params获取参数!-- Goods.vue -- script export default { mounted() { console.log(this.$route.params.id); // 输出2 或 3 } }; /script4特点参数隐藏在 URL 路径中语义化更强如/goods/1比/goods?id1更直观适合传递必填的、标识性的参数如商品 ID、用户 ID。4. 动态路由参数可选符处理非必填参数默认情况下动态路由参数是必填的如/goods/:id必须传入id否则会匹配 404。若需要参数可选可在参数名后添加?可选符。1配置可选动态路由在路由规则的参数名后加?// router/index.jsconstroutes[// id参数可选/goods 和 /goods/1 都能匹配{path:/goods/:id?,name:Goods,component:Goods}];2 声明式导航使用可选择是否传递参数template !-- 不传递id参数匹配/goods -- router-link to/goods商品列表/router-link !-- 传递id参数匹配/goods/4 -- router-link to/goods/4草莓详情/router-link /template3目标页面兼容处理在目标组件中判断参数是否存在!-- Goods.vue -- script export default { mounted() { const goodsId this.$route.params.id; if (goodsId) { console.log(当前是商品详情ID, goodsId); } else { console.log(当前是商品列表); } } }; /script二、重定向页面跳转的 “快捷方式”重定向用于将一个路由自动跳转到另一个路由如访问/home时跳转到/通过路由规则的redirect属性实现。// router/index.js 路由规则constroutes[{path:/,component:Home},// 访问/home时重定向到首页{path:/home,redirect:/},// 也可以重定向到命名路由需给路由配置name{path:/old-goods,redirect:{name:Goods}}];三、处理 404 页面捕获无效路由当用户访问不存在的路由时需要显示 “404 页面”—— 通过通配符*匹配所有未定义的路由。步骤1.创建 404 页面组件如NotFound.vuetemplate div img srchttps://img2.baidu.com/it/u1515291965,518622767fm253fmtautoapp138fPNG?w500h294 alt /div /template script export default { } /script style scoped langless div { text-align: center; img { margin-top: 100px; } } /style2.在路由规则最后添加通配符路由// router/index.jsimportNotFoundfrom../views/NotFound.vue;constroutes[{path:/,component:Home},{path:/goods,component:Goods},// 通配符*匹配所有未定义的路由{path:*,component:NotFound}];此时访问/abc等无效路径会自动渲染NotFound.vue。四、路由模式控制 URL 的表现形式Vue Router 有两种路由模式决定 URL 的格式1. hash 模式默认URL 中包含#如http://localhost:8080/#/goods优点兼容性好支持所有浏览器缺点URL 不够美观。2. history 模式URL 无#如http://localhost:8080/goods优点URL 更符合传统网站格式缺点需要后端配合部署时需配置 Nginx/Apache否则刷新页面会 404。配置方式// router/index.jsconstrouternewVueRouter({mode:history,// 切换为history模式routes});五、编程式导航通过 JS 控制跳转编程式导航是通过 JavaScript 代码控制页面跳转的核心方式而 Vue Router 中最常用的跳转逻辑可分为path跳转和name跳转两大类每种方式又支持不同的传参策略。本文将这两种跳转方式与传参逻辑结合帮你系统掌握编程式导航的用法。1. 核心跳转方法this.$router.push()无论使用path还是name跳转核心方法都是this.$router.push()它接收一个路由地址参数字符串或对象并将新路由添加到浏览器历史记录中支持后退。基础用法无传参// 字符串形式仅path跳转可用 this.$router.push(/home); // 对象形式path/name跳转均支持 this.$router.push({ path: /home }); // path跳转 this.$router.push({ name: Home }); // name跳转2. 方式 1path 跳转通过路径匹配path跳转直接通过路由的路径如/goods匹配目标页面传参方式有两种query传参和动态路由params传参。1path 跳转 query 传参最常用参数以查询字符串形式拼接在 URL 后如 /goods?id1name苹果 适合传递非敏感、可选参数。用法示例this.$router.push({path:/goods,// 目标路由路径query:{id:1,name:苹果,price:5.99}});// 最终URL/goods?id1name苹果price5.99目标页面接收参数// 目标组件中通过$route.query获取mounted(){console.log(this.$route.query.id);// 1console.log(this.$route.query.name);// 苹果}2path 跳转 动态路由 params 传参需路由配置参数嵌入 URL 路径中如/goods/1适合传递标识性参数如 ID需在路由规则中定义动态参数:开头。步骤 1配置动态路由规则// router/index.jsconstroutes[{path:/goods/:id,component:Goods}// 定义动态参数id];步骤 2path 跳转传参// 方式1直接拼接路径推荐this.$router.push(/goods/${1});// 等价于 /goods/1// 方式2通过params对象传递仅path为字符串时生效this.$router.push({path:/goods,params:{id:1}// 解析为 /goods/1});目标页面接收参数// 目标组件中通过$route.params获取mounted(){console.log(this.$route.params.id);// 1}3. 方式 2name 跳转通过路由名称匹配name跳转通过路由规则中定义的name属性匹配页面如name: Goods传参方式同样支持query和params且更推荐用于复杂场景。1name 跳转 query 传参与path跳转query传参逻辑一致参数显示在 URL 查询字符串中但通过name匹配路由更易维护。用法示例// 步骤1路由规则定义name// router/index.jsconstroutes[{path:/goods,name:Goods,component:Goods}];// 步骤2name跳转传参this.$router.push({name:Goods,// 目标路由名称query:{id:2,name:香蕉}});// 最终URL/goods?id2name香蕉目标页面接收参数// 同样通过$route.query获取console.log(this.$route.query.id);// 22name 跳转 params 传参推荐参数可嵌入路径动态路由或仅在内存中传递无需手动拼接路径灵活性更高。步骤 1配置带 name 的动态路由// router/index.jsconstroutes[{path:/goods/:id,name:Goods,component:Goods}];步骤 2name 跳转传参this.$router.push({name:Goods,params:{id:2,// 动态参数会嵌入URL/goods/2type:fruit// 非动态参数仅内存传递刷新丢失}});目标页面接收参数// 动态参数和非动态参数均通过$route.params获取mounted(){console.log(this.$route.params.id);// 2URL中可见console.log(this.$route.params.type);// fruit仅内存中}