路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。 点击之后，怎么做到正确的对应，比如，我点击home 按钮，页面中怎么就正好能显示home的内容。这就要在js 文件中配置路由。 路由中...
由于用Vue框架开发的应用是SPA（单页面应用），采用的是路由的形式，没有所谓的页面，所以想让网页的标题随着路由的改变而改变，可以使用document.title = 来改变网页标题。 但是在IOS APP里这种方式不起作用，原因是在IOS webview中网页标题只加载一次，动态改变是无效的。 解决方案是在路由切换完成之后，静默加载一个空的iframe动态设置title util.js中定义setMetaTitle()函数 function setMetaTitle(title) {document.title = ...
在Web应用程序中，系统的瓶颈常在于系统的响应速度。如果系统响应速度过慢，用户就会出现埋怨情绪，系统的价值也因此会大打折扣。因此，提高系统响应速度，是非常重要的。 懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。 也叫延迟加载，即在需要的时候进行加载，随用随载。 为什么需要懒加载...
vue2.0在使用的过程中， .vue文件之间的跳转，在template中的常见写法是： <router-link to="/miniCard/statement/horizon"><button class="btn btn-default colorDe">继续</button> </router-link> 但是有时的需求是页面不直接跳转，有确认弹框或者其他事件，此时就需要在js中设置跳转，常用的一种方法是 .$router.push ，用法如下： this.$router.push({path: /...}); 希望本文对您有所帮助！ 拓展知识：解决this.$router.push无...
使用 Vue 构建的项目，一个页面是由多个组件构成的，而且经常是做成单页面应用，所以在跳转页面的时候，传统的 href 已经跟不上时代的步伐了，于是 vue-router 应运而生 在使用 vue-router 的时候，需要看看自己是否装了这个依赖，没有的话可以使用 npm install vue-router -S ，不过现在构建vue项目时有可以选择是否安装 vue-router，大家注意一下就行了 一、路由的配置 自动安装的vue-router，会在src 文件夹下有个一个 router -...
起步HTML<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><div id="app"><h1>Hello App!</h1><p><!-- 使用 router-link 组件来导航. --><!-- 通过传入 `to` 属性指定链接. --><!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --><router-link to="/foo">Go to Foo</router-link><router-link to="/bar">Go to Bar</router-link></p><!-- 路...
今天要介绍的是路由元信息，滚动行为以及路由懒加载这几个的使用方法。 1.路由元信息 什么是路由元信息，看看官网的解释，定义路由的时候可以配置 meta 字段可以匹配meta字段，那么我们该如何使用它，一个简单的例子，改变浏览器title的值。下面上代码。 //简单的我就不写了直接上解决方案 import Vue from vue import Router from vue-router import Login from ../login/Login import Home from ../pages/Home export default ne...
背景最近有个初学Vue的朋友问我，为什么我的两层路由跳不起来了，直接输url也不行？信息不是很充足及看不到源码的我，当时是那个一脸懵逼啊，心想这肯定是代码的问题，跟层级无关。接着我继续追问...(省略)...大致明白了情况，原来这位朋友没有理解Vue-Router嵌套的原理，下面整理了一下我对Vue-Router路由嵌套的理解 Vue-Router嵌套路由首先假设项目中有两个路由Profile和Posts，按写法把他们定义为一层路由，是Root的子路由，因此...
React-router 4React Router4是一个纯React重写的包，现在的版本中已不需要路由配置，一切皆组件。问题出发点最近在一个新的H5项目中使用了react router 4 ("react-router-dom": "^4.2.2")，项目中的一部分页面是需要给app客户端的同学使用，这样H5项目中的title就不能一成不变，需要显示对应页面的title，所以，我们就需要去监听路由变动来更改title。思路在react中，例如：在父路由中有两个子路由，两个子路由组件的内容都属于父...
hash模式urlvue-router默认hash模式——使用URL的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。 如果不想要这种默认的hash模式，可以用路由的history模式，这种模式充分的利用history.pushState API来完成URL跳转而无需重新加载页面。 index.js Vue.use(Router) export default new Router({mode: history,routes: [{path:"/xxx",name:"xxx",component: Xxx,} ] }) history模式 修改之后url就变成了正常的url总结...
场景：vue-router实现的单页应用，登录页调用登录接口后，服务器返回用户信息，然后通过router.push({name: 'index', params: res.data})跳转到主页，并在主页显示数据。但是当刷新页面时，由于并不是通过登录接口进入主页，router中没有‘params: res.data信息，主页无法获取到登录信息。 解决方案： 1、session&服务器渲染 传统的方案是，登录页和主页是单独的两个页面，登录成功后服务器生成用户信息对应的session，然后渲染主页...
传统方法 以前在单页面路由中，就只能在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.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。路由的基本实现<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatib...
Vue-router 中hash模式和history模式的关系在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的mode:"hash"; mode:"history"; hash模式和history模式的不同对于vue这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。为了达到这一目的，浏览器当前提供了...