网站侵权 做网站有责任吗,温岭建设网站,wordpress首页默认中文,电子商务网站建设的规划方案目录 单页应用程序#xff1a;SPA - Single Page Application路由 VueRouterVueRouter使用步骤组件存放目录问题 路由模块封装声明式导航 - 导航连接两个类名自定义匹配类名 声明式导航 - 跳转传参Vue路由 - 重定向Vue路由 - 404Vue路由 - 模式设置 编程式导航 - 基本跳转编程… 目录 单页应用程序SPA - Single Page Application路由 VueRouterVueRouter使用步骤组件存放目录问题 路由模块封装声明式导航 - 导航连接两个类名自定义匹配类名 声明式导航 - 跳转传参Vue路由 - 重定向Vue路由 - 404Vue路由 - 模式设置 编程式导航 - 基本跳转编程式导航 - 路由传参组件缓存 keep-alive返回上一个组件 单页应用程序SPA - Single Page Application
单页面应用(SPA)所有功能都在一个html页面上实现。
开发分类实现方式页面性能开发效率用户体验学习成本首屏加载SEO单页一个html页面按需更新性能高高非常好高慢差多页多个html页面整页更新性能低中等一般中等快优
应用场景
单页面应用系统类网站 / 内部网站 / 文档类网站 / 移动端站点多页面应用公司官网 / 电商类网站
单页面应用程序之所以开发效率高性能高用户体验好最大的原因就是页面按需更新。
要按需更新首先要明确访问路径和组件的对应关系。
访问路径和组件的对应关系通过路由确定。
路由
路由就是一种映射关系。
生活中的路由设备和ip的映射关系。
Vue中的路由路径和组件的映射关系。
VueRouter
作用修改地址栏路径时切换显示匹配的组件。
说明Vue官方的一个路由插件是一个第三方包。
官网http://v3.router.vuejs.org/zh/
VueRouter使用步骤
五个基础步骤固定 下载下载VueRouter模块到当前工程版本3.6.5 yarn add vue-router3.6.5 Vue2 VueRouter3.x Vue3.xVue3 VueRouter4.x Vue4.x 引入 import VueRouter from vue-router 安装注册 Vue.use(VueRouter) 创建路由对象 const router new VueRouter() 注入将路由对象注入到new Vue实例中建立关联 new Vue({render: h h(App),router: router
}).$mount(#app)2个核心步骤 创建需要的组件views目录配置路由规则 import Find from ./views/Find.vue
import My from ./views/My.vue
import Friend from ./views/Friend.vueconst router new VueRouter({routes: [{ path: /find, component: Find },{ path: /my, component: My },{ path: /friend, component: Friend },]
})配置导航配置路由出口路径匹配的组件显示的位置 div classfooter_wrapa href#/find发现音乐/aa href#/my我的音乐/aa href#/friend朋友/a
/div
div classtoprouter-view/router-view
/div组件存放目录问题
.vue文件分两类——页面组件和复用组件但本质无区别分类是为了更容易维护。
src/views文件夹 页面组件 - 页面展示 - 配合路由用 src/components文件夹 复用组件 - 展示数据 - 常用于复用
路由模块封装
目标将路由模块抽离出来。
好处拆分模块利于维护。
声明式导航 - 导航连接
需求实现导航高亮效果。
vue-router提供了一个全局组件router-link取代a标签
能跳转配置to属性指定路径必须。本质还是a标签to无需 #能高亮默认就会提供高亮类名可以直接设置高亮样式
两个类名
router-link自动给当前导航添加了两个高亮类名。
区别
router-link-active 模糊匹配用的多 to/my可以匹配 /my /my/a /my/b router-link-exact-active 精确匹配 to/my只可以匹配 /my
自定义匹配类名
router-link的两个高亮类名太长我们可以自定义类名
const router new VueRouter({routes: [...],linkActiveclass: 类名1, // 配置模糊匹配的类名linkExactActiveClass: 类名2 // 配置精确匹配的类名
})声明式导航 - 跳转传参
目标在跳转路由时进行传值。 查询参数传参适合串多个参数 语法格式to/path?参数名值 对应页面组件接收传递过来的值$route.query.参数名 动态路由传参穿单个参数方便 配置动态路由 const router new VueRouter({routes: {...,{path: /search/:words, // 配置参数名component: Search}}
})配置导航链接to/path/参数值 对应页面组件接收传递过来的值$route.params.参数名
问题配了路由path: /search/:words为什么按下面步骤操作会匹配到组件显示空白
原因/search/:words表示必须要传参数。如果不传参数也希望匹配可以加个可选符 “?”例如/search/:words?
Vue路由 - 重定向
问题网页打开url默认是 / 路径为匹配到组件时会出现空白。
说明重定向 —— 匹配path后强制跳转path路径
语法{ path: 匹配路径, redirect: 重定向到的路径 }
const router new VueRouter({routes: [{ path: /, redirect: /home },{ path: /home, component: Home },{ path: /search/:words, component: Search },]
})Vue路由 - 404
作用当路径找不到匹配时给个提示页面
位置配在路由最后
语法path: *表示匹配任意路径 - 前面不匹配就命中最后这个。
Vue路由 - 模式设置
问题路由的路径看起来不自然有#能否切成真正路径形式 hash路由默认 例如http://localhost:8080/#/home history路由常用 例如http://localhost:8080/home (以后上线需要服务端支持) const router new VueRouter({routes,mode: history
})编程式导航 - 基本跳转
编程式导航用JavaScript代码实现点击按钮跳转。
两种语法 path路径跳转简易方便 this.$router.push(路由路径)
this.$router.push({path: 路由路径
})name命名路由跳转适合path路径长的场景 this.$router.push({name: 路由名
}){ name: 路由名, path: /path/xxx, component: xxx }编程式导航 - 路由传参
两种传参方式查询参数动态路由传参
两种跳转方式对于两种传参方式都支持 path路径跳转传参 query传参 this.$router.push(/路径?参数名1参数值1参数名2参数值2)
this.$router.push({path: /路径,query: {参数名1: 参数值1,参数名2: 参数值2,}
})动态路由传参需要配置动态路由 this.$router.push(/路径/参数值)
this.$router.push({path: /路径/参数值,query: {参数名: 参数值,}
})name命名路由跳转传参 query传参 this.$router.push({name: 路由名字,params: {参数名: 参数值,}
})动态路由传参 this.$router.push({name: search,params: {words: this.inpValue}
})组件缓存 keep-alive
问题从面经页点到详情页又点返回数据重新加载了但我希望能回到原来的位置。
原因路由加载组件被销毁了返回回来组件又被重建了所以数据重新被加载。
keep-alive是什么
keep-alive是Vue的内置组件当它包裹动态组件时会缓存不活动的组件实例而不是销毁它们。
keep-alive是一个抽象组件它自身不会渲染成一个DOM元素也不会出现在父组件链中。
keep-alive的优点
在组件切换过程中把切换出去的组件保留在内存中放置重复渲染DOM减少加载时间及性能消耗。
templatediv classh5-wrapperkeep-aliverouter-view/router-view/keep-alive/div
/template问题缓存了所有被切换的组件
keep-alive的三个属性
include组件名数组只有匹配的组件会被缓存exclude组件名数组任何匹配的组件都不会被缓存max最多可以缓存多少组件实例
keep-alive的使用会触发两个生命周期函数了解
activated当组件被激活使用的时候触发 —— 进入页面触发deactivated当组件不被使用的时候触发 —— 离开页面触发
返回上一个组件
语法$router.back()
作用返回上一个组件。
