商城网站的建设定位,做网站实现自动生成pdf,合肥做企业网站的网络公司,软装设计效果图最近做项目才发现#xff0c;我确实对 vue-router 太不熟悉了#xff0c;都只了解个简单用法就开始搞了#xff0c;本来很简单的问题#xff0c;都搞不清楚。现在重新看一遍文档#xff0c;重新梳理一下。 vue 路由的原理 说实话#xff0c;路由我一直也就光顾着用#…最近做项目才发现我确实对 vue-router 太不熟悉了都只了解个简单用法就开始搞了本来很简单的问题都搞不清楚。现在重新看一遍文档重新梳理一下。 vue 路由的原理 说实话路由我一直也就光顾着用没认真思考过这个问题还是那次人家面试问了这个我才反应过来是应该好好的了解一下了。 无刷新跳转页面是单页应用的一大优势用户体验好加载速度快vue 路由的跳转就是无刷新的它有两种形式可以在定义路由的时候通过 mode 字段去配置如果不配置这个字段那么默认使用的就是 hash 模式。 hash 模式即通过在链接后添加 # 路由名字根据匹配这个字段的变化触发 hashchange 事件动态的渲染出页面。就有点类似像 a 链接用作页面上的锚点一样不会刷新页面。 另外一种方式是 history 模式也就是使用的浏览器的 history APIpushState 和 replaceState。通过调用 pushState 操作浏览器的 history 对象改变当前地址同时结合window.onpopstate 监听浏览器的返回和前进事件同样可以实现无刷新的跳转页面。replaceState 与 pushStete 不同的就是前者是替换一条记录后者是添加一条记录。 有关于 pushState 的用法详见MDN 文档。这个 API 与 ajax 合起来构成的 pjax 技术也是用于实现页面无刷新加载的一种方式常用于 PC 长列表页面的翻页啥的~ history 相对于 hash 模式来说最大的好处就是没有讨厌的 # 符号比如同样一个 list 页面在 hash 模式下url 链接表现为 http://yoursite.com/#/list看着就难受。在 history 模式下面url 链接表现为 http://yoursite.com/list 看着比较清爽而且相信做过微信公众号开发的都懂这个该死的 # 有多烦人在下面的应用场景里面我再讲下这个问题 那么问题来了既然 history 模式样子好看功能也一样为啥还是用 hash 模式的人比较多【此处没有真凭实据我瞎说的】因为 history 模式还需要服务端进行配置否则刷新页面就会产生 404 错误。这里也比较好理解啦因为我们实际上是使用的 pushState 操作页面的跳转而不是真的去服务器请求另外一个 list.html 文件那按照 http://yoursite.com/#/list 这个路径自然找不到啦 如果是 nginx 的服务器在 location / 里面加上 try_files $uri $uri/ /index.html; 即可。这行代码表示如果匹配不到静态资源的路径就将重定向到 index 页面这样就不会出错啦因为需要找后端小哥哥修改服务器配置文件如果自己没有完全理解两边又沟通不清楚的情况下使用 history 模式的难度无疑就大了一些不过也不是什么大问题全看个人需要啦哈哈 vue 路由传参的两种方式 页面参数无非就两种query 和 paramsparams 是以 /params 的形式表现在 url 上而 query 是以 ?queryquery1 这种形式表现在 url 上此外使用 params 参数还需要配置到路由定义上不然不会展示在 url 上并且刷新就会消失。 这个比较简单需要注意的地方就是如果传 params 参数不能使用 path 字段跳转否则没效果。而 query 参数则没有这个限制使用 name 和 path 字段都可以。 这个虽然简单但是一定要自己操作一遍才记得住啊。。反正我是早就看到但是一直记混了重新用 demo 写了一遍才记住而且别人说的也不一定就是对的还是要自己实验一遍才知道呢。╮(╯▽╰)╭ vue 路由的跳转 vue 路由的跳转分成两种一种是声明式使用router-link声明跳转to属性定义跳转的参数。另一种是编程式使用 router.go()、router.push()、router.replace()方法进行跳转go方法就是与浏览器的history api 的方法相同可以进行返回上一页等操作。 push方法和replace方法的区别在于前者会把当前页面加入 history 记录里面可以通过history.go(-1)回到这个页面。而replace方法则会在 history 记录里面替换掉当前记录如果你在跳转后的新页面返回上一页它不会回到跳转前的页面会回到上上个页面如果上上个页面没有记录则不会跳转。 vue 路由守卫 vue 路由守卫分为三种一种是全局的路由守卫通常在实例化路由之后设置来做一些通用的路由操作它所有的路由跳转都会执行的操作一种是单个路由独享的守卫在单个路由定义的时候进行设置所有跳转这个路由都会执行另外一种就是组件内的守卫只在组件内生效。 全局路由守卫类型 router.beforeEach(to, from, next)router.afterEach(to, from, next)路由独享的守卫 beforeEnter(to, from, next)组件独享的守卫: beforeRouteEnter(to, from, next)beforeRouteUpdate(to, from, next) —— 动态参数路径改变时组件实例被复用的时候调用。beforeRouteLeave(to, from, next) —— 导航离开组件所在路由时被调用。vue 路由的一些应用场景处理 什么时候用 push什么时候用 replace 最开始路由跳转我都是用 push() 比较多或者用 go() 做返回很少用到过 replace() 后来在业务需求下翻文档才发现这个漏掉的 API。简单来说当你需要从A页面跳转到B页面再跳转到C页面然后在C页面返回能直接返回到A页面。那么在B页面跳转C页面的时候使用replace()方法进行跳转即可。 动态改变页面的 title 定义路由的时候在路由的 meta 字段里面添加一个 title 属性定义好页面的标题名称。在全局的路由守卫beforeEach()方法里面添加一个判断获取路由的 meta 字段动态的改变页面的 title。// router.js
{path: /index,name: index,meta: {title: 首页}
}// main.js
router.beforeEach(to, from, next){if(to.meta.title){document.title to.meta.title}next() // 这个方法必须调用 不然路由不会跳转
} 微信开发单页应用页面 url 导致的传参或者跳转失败的问题 微信授权跳转 在做微信授权跳转的时候hash 模式下链接里面带有 # 号可能会导致重定向跳转失败使用 encodeURIComponent 把页面地址处理之后再传入。 let _url encodeURIComponent(location.href)
location.href https://open.weixin.qq.com/connect/oauth2/authorize?appid${this.appid}redirect_uri${_url}response_typecodescopesnsapi_basestate#wechat_redirect 获取 wxconfig 配置 前端获取 wxconfig 比较简单主要的操作都在后端前端只需要传一个 url 参数由后端去获取 config 的参数回传给前端。前端拿到参数后调用 wx.config 方法。 let url location.href.split(#)[0]
http.get(weixin/config,{params:{url: encodeURIComponent(url)}
})
.then(res{wx.config({beta: true, // 必须这么写否则wx.invoke调用形式的jsapi会有问题debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来若要查看传入的参数可以在pc端打开参数信息会通过log打出仅在pc端时才会打印。appId: res.data.appId, // 必填企业微信的corpIDtimestamp: res.data.timestamp, // 必填生成签名的时间戳nonceStr: res.data.nonceStr, // 必填生成签名的随机串signature: res.data.signature,// 必填签名见 附录-JS-SDK使用权限签名算法jsApiList: [scanQRCode] // 必填需要使用的JS接口列表凡是要调用的接口都需要传进来})// 检测微信wx.error(function(res){// config信息验证失败会执行error函数如签名过期导致验证失败具体错误信息可以打开config的debug模式查看也可以在返回的res参数中查看对于SPA可以在这里更新签名。console.log(错误信息,res)})
}) 单页面应用加百度统计 在单页应用上面如果直接把百度统计的代码加到 html 不做任何处理的话是统计不到每个页面的访问量的所以把添加 js 和 监听跳转页面的代码都写到 main.js 里面去。 // 添加百度统计 先判断是生产环境还是开发环境 如果是开发环境 不用添加
if (process.env.NODE_ENV ! development) {let _hmt _hmt || [];window._hmt _hmt; // 必须把_hmt挂载到window下否则找不到(function() {var hm document.createElement(script);hm.src https://hm.baidu.com/hm.js?yourappid;var s document.getElementsByTagName(script)[0];s.parentNode.insertBefore(hm, s);})()
}router.beforeEach(to, from, next){// 添加百度统计代码 先判断是生产环境还是开发环境if (process.env.NODE_ENV ! development) {// 添加页面统计if (_hmt) {if (to.path) {_hmt.push([_trackPageview, /# to.fullPath]);}}}
} 参考文档https://segmentfault.com/a/1190000011967786https://www.jianshu.com/p/febd38110645 转载于:https://www.cnblogs.com/linxue/p/10293893.html
