怎么做才能设计出好的网站,郑州直播网站建设,做网站漯河,培训网站官网文章目录 版权声明路由重定向、404#xff0c;路由模式重定向404路由模式 声明式导航vue-routerrouter-link-active 和 router-link-exact-active定制router-link-active 和 router-link-exact-active跳转传参两种跳转传参总结 编程式导航两种语法路由传参path路径跳转传参nam… 文章目录 版权声明路由重定向、404路由模式重定向404路由模式 声明式导航vue-routerrouter-link-active 和 router-link-exact-active定制router-link-active 和 router-link-exact-active跳转传参两种跳转传参总结 编程式导航两种语法路由传参path路径跳转传参name命名路由传参 缓存组件keep-alive初识额外的两个生命周期钩子 版权声明
本博客的内容基于我个人学习黑马程序员课程的学习笔记整理而成。我特此声明所有版权属于黑马程序员或相关权利人所有。本博客的目的仅为个人学习和交流之用并非商业用途。我在整理学习笔记的过程中尽力确保准确性但无法保证内容的完整性和时效性。本博客的内容可能会随着时间的推移而过时或需要更新。若您是黑马程序员或相关权利人如有任何侵犯版权的地方请您及时联系我我将立即予以删除或进行必要的修改。对于其他读者请在阅读本博客内容时保持遵守相关法律法规和道德准则谨慎参考并自行承担因此产生的风险和责任。本博客中的部分观点和意见仅代表我个人不代表黑马程序员的立场。
路由重定向、404路由模式
重定向 问题网页打开时 url 默认是 / 路径未匹配到组件时会出现空白 解决方案重定向 → 匹配 / 后, 强制跳转 /home 路径 语法 { path: 匹配路径, redirect: 重定向到的路径 } 代码演示 const router new VueRouter({routes: [{ path: /, redirect: /home},...]
})404
作用当路径找不到匹配时给个提示页面位置配在路由最后语法path: “*” (任意路径) – 前面不匹配就命中最后这个
import NotFind from /views/NotFind
const router new VueRouter({routes: [{ path: /, redirect: /home },{ path: /home, component: Home },{ path: *, component: NotFind }]
})NotFound.vuetemplatedivh1404 Not Found/h1/div
/templatescript
export default {}
/scriptstyle/style路由模式
Vue Router 支持两种路由模式 hash路由(默认) 例如: http://localhost:8080/#/pathhistory路由(常用) 例如: http://localhost:8080/path Hash 模式 (默认模式) 在 URL 中带有 #例如 http://example.com/#/path。使用 window.location.hash 来监听路由变化。优点兼容性好支持老版本浏览器。缺点 URL 中会出现 #有时可能不太美观。 History 模式 使用 HTML5 History API 来实现不带 #例如 http://example.com/path。需要特定的服务器配置来支持这种模式。优点;URL 更加干净美观符合传统 URL 结构。缺点需要后端服务器支持并且在不正确配置的情况下可能会导致404错误。
在创建 Vue Router 实例时通过 mode 选项来指定使用的路由模式
const router new VueRouter({//如果没有显式指定 mode那么默认将使用 Hash 模式mode: history, // 使用 History 模式routes: [// ... 路由配置]
})需要注意的是如果使用 History 模式还需要在服务器端进行相应的配置以确保在直接访问页面时能正确地返回对应的内容而不是得到 404 错误。 在使用 History 模式时可以使用 base 选项来指定基础URL这样在路由跳转时会自动拼接到URL前面 const router new VueRouter({mode: history,base: /myapp/, // 在此处指定基础 URLroutes: [// ... 路由配置]
})总的来说Hash 模式通常更容易配置和使用而 History 模式提供了更美观的 URL 结构。
声明式导航
vue-router
vue-router 提供了一个全局组件 router-link (取代 a 标签) 能跳转配置 to 属性指定路径(必须) 。本质还是 a 标签 to 无需 #能高亮默认就会提供高亮类名可以直接设置高亮样式 通过router-link自带的两个样式进行高亮 使用router-link跳转后当前点击的链接默认加了两个class的值 router-link-exact-active和router-link-active
router-link-active 和 router-link-exact-active router-link-active 和 router-link-exact-active 是两个用于处理导航链接样式的特殊类名。这些类名用于控制当导航链接与当前路由匹配时所应用的CSS类。 router-link-active: 模糊标识当前活动即匹配了当前路由的导航链接的。 router-link to/home classnav-link active-classrouter-link-activeHome/router-linkrouter-link-exact-active: 标识当前精确匹配的导航链接的。与router-link-active不同router-link-exact-active只有在链接与当前路由完全匹配时才会被添加。 router-link to/ classnav-link exact active-classrouter-link-exact-activeHome/router-link定制router-link-active 和 router-link-exact-active 跳转传参
跳转传参有两种方式在跳转的时候把所需要的参数传到其他页面中 查询参数传参 router-link to/path?参数名值/router-link对应页面组件接受参数 $router.query.参数名动态路由传参 /search/:words 表示必须要传参数否则会导致路由错误。如果不传参数也希望匹配可以加个可选符 const router new VueRouter({routes: [...,{ path: /search/:words, component: Search }]
})对应页面组件接受参数 $route.params.参数名查询参数查询栗子 div classhot-link热门搜索router-link to/search?key手机手机/router-linkrouter-link to/search?key电脑电脑/router-link/divp搜索关键字: {{ $route.query.key }} /p动态路由可选符传参栗子
import Home from /views/Home
import Search from /views/Search
import Vue from vue
import VueRouter from vue-router
Vue.use(VueRouter) // VueRouter插件初始化const router new VueRouter({routes: [{ path: /home, component: Home },{ path: /search/:words, component: Search }]
})
export default routerdiv classhot-link热门搜索router-link to/search/手机手机/router-linkrouter-link to/search/电脑电脑/router-link/divp搜索关键字: {{ $route.params.words }} /p两种跳转传参总结
方式适用场景优点示例查询参数传参传递多个参数时较为方便灵活可以传递多个参数1. to“/path?keyvalueparam2value”易于构建和理解URL2. $route.query.key不限于特定路由配置3. 适用于非动态路由情况动态路由传参传递单个参数时优雅简洁清晰明了路由中直接体现参数1. 配置path: “/path/:param”易于维护和理解路由结构2. to“/path/value”利于定义必要参数的路由3. $route.params.param更有助于RESTful路由设计4. 适用于资源标识和特定路由参数的传递
查询参数传参在需要传递多个参数或者不依赖路由结构时更为灵活。动态路由传参在需要传递单个参数、维护清晰的路由结构以及实现RESTful路由设计时更为优雅和适用。
编程式导航
两种语法
编程式导航用JS代码来进行跳转两种语法 path 路径跳转 简易方便name 命名路由跳转 (适合 path 路径长的场景) path路径跳转语法 特点简易方便 //简单写法
this.$router.push(路由路径)//完整写法
this.$router.push({path: 路由路径
})栗子
script
export default {name: FindMusic,methods: {goSearch () {// 1. 通过路径的方式跳转this.$router.push(路由路径) [简写]this.$router.push(/search)this.$router.push({ [完整写法]path: 路由路径 })this.$router.push({path: /search})}}
}
/scriptname命名路由跳转 特点适合 path 路径长的场景 语法 路由规则必须配置name配置项 { name: 路由名, path: /path/xxx, component: XXX },通过name来进行跳转 this.$router.push({name: 路由名
})栗子 router/index.js配置 import Search from /views/Search
import Vue from vue
import VueRouter from vue-router
Vue.use(VueRouter) // VueRouter插件初始化// 创建了一个路由对象
const router new VueRouter({// 注意一旦采用了 history 模式地址栏就没有 #需要后台配置访问规则mode: history,routes: [{ name: search, path: /search/:words?, component: Search },]
})
export default routerviews/home.vue文件部分内容
script
export default {name: FindMusic,methods: {goSearch () {// 1. 通过路径的方式跳转// (1) this.$router.push(路由路径) [简写]// this.$router.push(/search)// (2) this.$router.push({ [完整写法]// path: 路由路径 // })// this.$router.push({// path: /search// })this.$router.push({name: search})}}
}
/script路由传参
path路径跳转传参
两种传参方式 查询参数动态路由传参
path路径跳转传参query传参//简单写法
this.$router.push(/路径?参数名1参数值1参数2参数值2)
//完整写法
this.$router.push({path: /路径,query: {参数名1: 参数值1,参数名2: 参数值2}
})接受参数的方式依然是$route.query.参数名注意 path不能配合params使用 path路径跳转传参动态路由传参//简单写法
this.$router.push(/路径/参数值)
//完整写法
this.$router.push({path: /路径/参数值
})接受参数的方式依然是$route.params.参数值
name命名路由传参
name 命名路由跳转传参 (query传参)
this.$router.push({name: 路由名字,query: {参数名1: 参数值1,参数名2: 参数值2}
})name 命名路由跳转传参 (动态路由传参)
this.$router.push({name: 路由名字,params: {参数名: 参数值,}
})缓存组件
keep-alive初识 在Vue.js中可以通过使用keep-alive组件来缓存其他组件的实例以提高应用性能。 keep-alive是Vue内置的组件可以用来缓存已渲染的组件以便在切换路由或组件时不需要重新创建和销毁组件实例. keep-alive 是一个抽象组件它自身不会渲染成一个 DOM 元素也不会出现在父组件中。 优点 在组件切换过程中把切换出去的组件保留在内存中防止重复渲染DOM减少加载时间及性能消耗提高用户体验性。 keep-alive缓存组件操作步骤
首先导入Vue和Vue Router import Vue from vue;import VueRouter from vue-router;Vue.use(VueRouter);创建一个Vue Router实例并定义你的路由 const router new VueRouter({routes: [{ path: /, component: Home },{ path: /about, component: About },// 其他路由],});在Vue组件中使用keep-alive来包裹需要缓存的组件
templatediv classh5-wrapperkeep-alive :include[LayoutPage]router-view/router-view/keep-alive/div
/templatekeep-alive的三个属性 ① include 组件名数组只有匹配的组件会被缓存 ② exclude 组件名数组任何匹配的组件都不会被缓存 ③ max 最多可以缓存多少组件实例
额外的两个生命周期钩子
keep-alive的使用会触发两个生命周期函数 activated 当组件被激活使用的时候触发 → 进入这个页面的时候触发 deactivated 当组件不被使用的时候触发 → 离开这个页面的时候触发 组件缓存后就不会执行组件的created, mounted, destroyed 等钩子所以其提供了actived 和deactived钩子帮我们实现业务需求。 栗子
script
export default {// 组件名(如果没有配置 name才会找文件名作为组件名)name: LayoutPage,// 组件缓存了就不会执行组件的createdmounteddestroyed等钩子// 所以提供了 actived 和 deactivedcreated () {console.log(created 组件被加载了);},mounted () {console.log(mounted dom渲染完了);},destroyed () {console.log(destroyed 组件被销毁了);},activated () {alert(你好欢迎回到首页)console.log(activated 组件被激活了看到页面了);},deactivated () {console.log(deactivated 组件失活离开页面了);}
}
/script
