使用 Vue 构建的项目,一个页面是由多个组件构成的,而且经常是做成单页面应用,所以在跳转页面的时候,传统的 href 已经跟不上时代的步伐了,于是 vue-router 应运而生 在使用 vue-router 的时候,需要看看自己是否装了这个依赖,没有的话可以使用 npm install vue-router -S ,不过现在构建vue项目时有可以选择是否安装 vue-router,大家注意一下就行了 一、路由的配置 自动安装的vue-router,会在src 文件夹下有个一个 router -...
背景最近有个初学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'...