vue-router

路由响应过程： 浏览器发出请求 服务器监听到num端口（或443）有请求过来，并解析url路径 根据服务器的路由配置，返回相应信息（可以是 html 字串，也可以是 json 数据，图片等） 浏览器根据数据包的 Content-Type 来决定如何解析数据 一般的vueRouter的代码模式是这样的： let router = new Router({ mode: 'history|hash|abstract', routes: [ { // 默认页 path: '*', redirect: to => { return '/' }, meta: { status: *** } }, { path: '/', name: '****', component: ****, meta: { status: *** } }, ], beforeEnter: (to, from, next) => {}), scrollBehavior: fun() }) 可以看到的是使用Router这个类进行实例化【new Router(options)】 在使用vueRouter的时候，我们会在项目中使用 Vue.use(Router) 安装，它会加载VueRouter中的 install 方法使得所有组件都可以使用router的实例（ this.$router/this.$route ）

该组件支持用户在具有路由功能的应用中(点击)导航,默认渲染成带有正确链接的<a>标签，可以通过tag属性生成别的标签。 它本质上是通过在生成的标签上绑定了click事件，然后执行对应的VueRouter实例的push()实现的，对于router-link组件来说，可以传入以下props: to 表示目标路由的链接,当被点击后，内部会立刻把to的值传到router.push(),所以这个值可以是一个字符串或者是描述目标位置的对象 tag router-link组件渲染的标签名，默认为a exact 布尔类型,“是否激活”默认类名的依据是包含匹配 append 布尔类型,设置append属性后,则在当前(相对)路劲前添加基路劲 replace 布尔类型,设置replace后，当点击时会调用router.replace()而不是router.push(),这样导航后不会留下history记录 activeClass 链接激活时使用的CSS类名 exactActiveClass 配置当链接被精确匹配的时候应该激活的 class event 声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组 举个栗子: writer by:大沙漠 QQ:22969969 <div id="app"> <router-link to="/info/1">详情页1</router-link>

近期面试，遇到关于vue-router实现原理的问题，在查阅了相关资料后，根据自己理解，来记录下。 我们知道vue-router是vue的核心插件，而当前vue项目一般都是单页面应用，也就是说vue-router是应用在单页面应用中的。 那么，什么是单页面应用呢？在单页面应用出现之前，多页面应用又是什么样子呢？ 单页面应用与多页面应用 单页面 即 第一次进入页面的时候会请求一个html文件，刷新清除一下。切换到其他组件，此时路径也相应变化，但是并没有新的html文件请求，页面内容也变化了。 原理是：JS会感知到url的变化，通过这一点，可以用js动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上，这个时候的路由不是后端来做了，而是前端来做，判断页面到底是显示哪个组件，清除不需要的，显示需要的组件。这种过程就是单页应用，每次跳转的时候不需要再请求html文件了。 多页面 即 每一次页面跳转的时候，后台服务器都会给返回一个新的html文档，这种类型的网站也就是多页网站，也叫做多页应用。 原理是：传统的页面应用，是用一些超链接来实现页面切换和跳转的 其实刚才单页面应用跳转原理即 vue-router实现原理 vue-router实现原理 原理核心就是 更新视图但不重新请求页面。 vue-router实现单页面路由跳转，提供了三种方式：hash模式、history模式

对于Vue内部来说，不管是根组件还是子组件，都存在this.$router和this.$route两个属性，它们的区别如下: $router 　　　指向当前的VueRouter实例，也就是new Vue({router:router})这里传入的router实例对象,可以使用上一节里列出的VueRouter实例的属性和方法, $route 　　指向当前跳转的路由对象,是一个包含当前的路由信息的对象, <router-view/>组件会通过这个属性来获取需要渲染的组件 对于$router来说，它包含了如下属性 path ;当前路由的路劲,总是解析为绝对路劲 ;例如:/foo/bar params ;对象类型,包含了动态片段和全匹配片段，如果没有路由参数就是一个空对象 query ;对象类型，表示URL查询参数，对于/foo/user=1来说，$route.query.user等于1，如果没有查询参数，则是个空对象 hash ;当前路由的hash值(带#),如果没有hash值，则为空字符串 fullPath ;解析完成后的URL,包含查询参数和hash的完整路劲 matched ;一个数组，包含当前路由的所有嵌套路劲片段的路由记录，也就是所有父路由对象都在这个数组里面，<router-view/>组件会用到这个属性 name ;当前路由的名称 ;和命名别名有关

Vue为了构建 SPA, 需要引入前端路由系统Vue-Router。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求 。 为了达到这一目的，利用浏览器的特性, Vue-Router提供了以下两种路由模式： hash —— 即地址栏 URL 中的 # 符号 比如这个 URL：http://www.test.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。 history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。 这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。 hash与history的明显区别 hash history url显示 有#，很Low 无#，好看 回车刷新 可以加载到hash值对应页面 一般就是404掉了 支持版本 支持低版本浏览器和IE浏览器 HTML5新推出的API 为了解决history模式下刷新出现的404问题, 后台需要做一些路由支持,

VUE是当下最火爆的前端框架之一，vue-router是vue项目中几乎都会用到的组件，然而体验一时爽，其实坑不少。本篇经验将详细介绍vue-router的两种mode效果和开发测试环境下的问题，并给出解决方案。 vue-router的HTML5 History 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。 const router = new VueRouter({ mode: 'history', routes: [...] }) 当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id， 就是长这样的！ 不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就尴尬了。 所以，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。 目前后端服务器有Apache、nginx、原生 Node.js、基于 Node.js 的 Express、Internet Information Services (IIS)

在router/index.js中添加如下代码： import Vue from 'vue' import Router from 'vue-router' /** * 重写路由的push方法 * 解决，相同路由跳转时，报错 */ const originalPush = Router.prototype.push; Router.prototype.push = function push(location, onResolve, onReject) { if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject); return originalPush.call(this, location).catch((err) => err); }; Vue.use(Router) export default new Router({ routes: [ { path: '/', ... } ] }) 把错误捕获一下呗 来源： oschina 链接： https://my.oschina.net/wangch5453/blog/3191953

用 webpack 打包项目的时候，如果项目体量比较大，往往打出来的包 vender.js 会很大，导致首屏加载慢，这时候用 webpack 提供的 externals 属性，像 vue.js 、 vuex.js 、 vue-router.js 这些外部库，基本不会变的，如果将它们独立出来单独加载就能利于浏览器的缓存机制，不用每次都重新加载这些库js，并且大大的减少了打包的 vendor.js 文件 优化的步骤有两步，以抽离项目中 vue 和 vue-router 为例。 第一步：配置externals 这个配置最好在生产环境的时候配置，如果静态资源是 cdn 引入的话本地开发依赖网络。 //webpack.config.base.js const webpack = require("webpack"); const path = require("path"); const MODE = 'development' module.exports = { mode: MODE, entry: { index: path.resolve(__dirname, '../src/main.ts') }, ... externals: process.env.NODE_ENV === 'production' ? { "vue": "Vue", 'vue-router':