背景最近有个初学Vue的朋友问我，为什么我的两层路由跳不起来了，直接输url也不行？信息不是很充足及看不到源码的我，当时是那个一脸懵逼啊，心想这肯定是代码的问题，跟层级无关。接着我继续追问...(省略)...大致明白了情况，原来这位朋友没有理解Vue-Router嵌套的原理，下面整理了一下我对Vue-Router路由嵌套的理解 Vue-Router嵌套路由首先假设项目中有两个路由Profile和Posts，按写法把他们定义为一层路由，是Root的子路由，因此...
传统方法 以前在单页面路由中，就只能在html文件中定一个固定的网站的title。如果想要动态的去修改，需要使用如下的方法。 document.title = '这是一个标题'; 这样会让我们做很多无用功。显得十分蠢。 使用Vue-Router的方法 首先打开/src/router/index.js文件。 找到如下代码。 const vueRouter = new Router({routes,mode: history,linkActiveClass: active-link,linkExactActiveClass: exact-active-link,scrollBehavior (to, fr...
今天做项目时踩到了vue-router传参的坑（jquery和params），所以决定总结一下二者的区别。 1.jquery方式传参和接收参数 传参: this.$router.push({path:/xxxquery:{id:id}}) 接收参数: this.$route.query.id 注意:传参是this.$router,接收参数是this.$route,这里千万要看清了！！！ this.$router 和this.$route有何区别？ 在控制台打印两者可以很明显的看出两者的一些区别：1.$router为VueRouter实例，想要导航到不同URL，则使用$r...
Vue-router 中hash模式和history模式的关系在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的mode:"hash"; mode:"history"; hash模式和history模式的不同对于vue这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。为了达到这一目的，浏览器当前提供了...
最近在用vue的时候突然想到一个问题 首先，我们知道vue实现的单页应用中一般不会去刷新页面，因为刷新之后页面中的vuex数据就不见了。 其次，我们也知道一般情况下，url变更的时候，比如指定location.href、history.push、replace等，页面就会刷新。 那么问题来了，vue页面的页面跳转时怎么实现的？没刷新页面么？没刷新页面，又要改变url，加载新内容怎么做的？ 去翻了一下vue-router的源码，找到这样一段 export class HTML5Hist...
requireJs简介参数配置requireJS 常用的方法与命令也就两个，因此requireJS使用起来非常简单。require define其中define是用于定义模块，而require是用于载入模块以及载入配置文件。 define([id,deps,] callback); require(deps[,callback]);加载配置文件独立的引入配置文件也有两种方式，一种是通过script标签加载外部JS文件形式： <script src="js/require.js"></script> <script src="js/app.js"></script>另一种方式则是使用 r...
众所周知，vue-router有两种模式，hash模式和history模式，这里来谈谈两者的区别。 hash模式 hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件: window.onhashchange = function(event){console.log(event.oldURL, event.newURL);let hash = location.hash.slice(1);document.body.style.color = hash; }上面的代码可以通过改变hash来改变页面字体颜色，虽然没什么用，但是一定程度上说明了原理。 更关键的一...
问题:使用keep-alive标签后部分安卓机返回缓存页位置不精确问题 解决方案: <div id="app"><keep-alive><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$route.meta.keepAlive"></router-view> </div> const router = new Router({scrollBehavior(to, from, savedPosition) {if (savedPosition && to.meta.keepAlive) {return savedPosition;}return { x: 0, y:0 };}, });2. 页面返回出...
背景旧项目改造，进行前后端分离。做成了spa，为了保证后端路由时期链接可用性，使用了history模式。因为不同的页面有不同的分享内容，所以每次路由都要重新进行wx.config/wx.ready调用 微信分享遇到的坑微信官方文档上有下面一段话： 所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，...
前言通过上篇，我们知道前端理由的两种实现方法，Hash 路由与 History 路由，并且用它们分别实现了一个前端路由。接下来我们就将 Vue 与 Hash 路由结合，实现一个非常简单的 vue-router 吧。开始实现想象一下，如果自己实现了一个 vue-router，会怎么去使用呢？参考 vue-router 官方的使用方式，看看 html 的使用：<div id="app"><p><router-link to="#/">home</router-link><router-link to="#/book">book</router-link><router-l...
在学习 vue-router 的代码之前，先来简单了解一下前端路由。 前端路由主要有两种实现方法： Hash 路由History 路由先来看看这两种方法的实现原理。 接着我们将用它们来简单实现一个自己的前端路由。 前端路由 Hash 路由 url 的 hash 是以 # 开头，原本是用来作为锚点，从而定位到页面的特定区域。当 hash 改变时，页面不会因此刷新，浏览器也不会向服务器发送请求。 http://www.xxx.com/#/home 同时， hash 改变时，并会触发相应的...
vue-router是Vue.js官方提供的一套专用的路由工具库 安装命令如下 npm i vue-router -Dvue-router 实例是一个Vue插件，我们需要在Vue全局引用中通过Vue.use() 将它接入到Vue实例中。 在我们的工程中，,main.js是默认的程序入口文件，所有的全局配置都会在这个文件中进行。 我们在main.js中加入如下引用 import VueRouter from vue-router Vue.use(VueRouter)这样就完成了 vue-router最基本的安装工作了。 接下来我们要实现的功能描...
在开发webApp的时候，考虑到用户体验，经常会把不需要调用个人数据的页面设置成游客可以访问，而当用户进入到一些需要个人数据的，例如购物车，个人中心，我的钱包等等，在进行登录的验证判断，如果判断已经登录，则显示页面，如果判断未登录，则直接跳转到登录页面提示用户登录，今天就来分享下如何使用vue-router的beforEach方法来实现这个需求。 实现 本篇文章默认您已经会使用 webpack 或者 vue-cli 来进行环境的搭建，并且具有...
前阵子太忙了，自己一个人一边开发着新项目，一边维护着旧项目，没时间写博客，终于让我腾出时间了。废话少说，开始正文。 问题描述: 之前项目是angular开发的，后来用vue重构后。项目路径和vue路径不一致，但是app端分享出的链接，依旧是旧项目链接。 解决方法： 通过阅读vue-router的官方文档，发现重定向可以解决这个问题。 如之前文件路径是'/live/detail/id=7234'，'/skill/microList/',新项目路径是 '/s/live/detailid=7234'...
需求说明： 在开发 vue 项目的过程中遇到的需求是要把 api 接口前缀暴露在命令行，通过 npm run build apiUrl 即可修改接口入口，用于从 docker 部署到不同的测试服务器上，其次是路由模式的问题，部署到测试服务器上的需要是 history 模式，但是产品是用 electron + vue 开发的桌面应用，electron 硬性要求 vue-router 的路由模式是 hash 模式，所以命令行需新增一个配置项 mode ，mode 可选值有 history 、hash 最终结果： npm r...