参考来源:
一、vue-router是什么
vue-router就是WebApp的链接路径管理系统。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。
问题:为什么不用a标签
二、vue-router实现原理
1.vue-router 默认 hash 模式
使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。 hash(#)是URL 的锚点,代表的是网页中的一个位置,单单改变#后的部分,浏览器只会滚动到相应位置,不会重新加载网页,也就是说hash 出现在 URL 中,但不会被包含在 http 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面;同时每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用”后退”按钮,就可以回到上一个位置;所以说Hash模式通过锚点值的改变,根据不同的值,渲染指定DOM位置的不同数据。
问题:是怎么监听hash变化的——hashchange()
如何简单实现:
- 用
Class
关键字初始化一个路由.
class Routers { constructor() { // 以键值对的形式储存路由 this.routes = {}; // 当前路由的URL this.currentUrl = ''; }}复制代码
-
实现路由hash储存与执行。在初始化完毕后我们需要思考两个问题:
- 将路由的hash以及对应的callback函数储存
- 触发路由hash变化后,执行对应的callback函数
class Routers { constructor() { this.routes = {}; this.currentUrl = ''; } // 将path路径与对应的callback函数储存 route(path, callback) { this.routes[path] = callback || function() {}; } // 刷新 refresh() { // 获取当前URL中的hash路径 this.currentUrl = location.hash.slice(1) || '/'; // 执行当前hash路径的callback函数 this.routes[this.currentUrl](); }}复制代码
-
监听对应事件,我们只需要在实例化
Class
的时候监听上面的事件即可.
class Routers { constructor() { this.routes = {}; this.currentUrl = ''; this.refresh = this.refresh.bind(this); window.addEventListener('load', this.refresh, false); window.addEventListener('hashchange', this.refresh, false); } route(path, callback) { this.routes[path] = callback || function() {}; } refresh() { this.currentUrl = location.hash.slice(1) || '/'; this.routes[this.currentUrl](); }}复制代码
完整示例:
- 此外还要实现回退功能等,
2.vue-router
可选择 history模式
由于hash模式会在url中自带#,如果不想要很丑的 hash,我们可以用路由的 history 模式,只需要在配置路由规则时,加入"mode: 'history'".
//main.js文件中const router = new VueRouter({ mode: 'history', routes: [...]})复制代码
这种模式充分利用了html5 history interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器记录栈,在当前已有的 back、forward、go 基础之上,它们提供了对历史记录修改的功能。只是当它们执行修改时,虽然改变了当前的 URL ,但浏览器不会立即向后端发送请求。不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 就会返回 404,这就不好看了。所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。
export const routes = [ { path: "/", name: "homeLink", component:Home} { path: "/register", name: "registerLink", component: Register}, { path: "/login", name: "loginLink", component: Login}, { path: "*", redirect: "/"}]复制代码
2.1.history API
介绍:
其中常用的只有几种:
window.history.back(); // 后退window.history.forward(); // 前进window.history.go(-3); // 后退三个页面复制代码
history.pushState
用于在浏览历史中添加历史记录,但是并不触发跳转,此方法接受三个参数,依次为:
state:一个与指定网址相关的状态对象,popstate事件触发时,该对象会传入回调函数。如果不需要这个对象,此处可以填null。title:新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填null。url:新的网址,必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。复制代码
history.replaceState
方法的参数与pushState
方法一模一样,区别是它修改浏览历史中当前纪录,而非添加记录,同样不触发跳转。
popstate
事件,每当同一个文档的浏览历史(即history对象)出现变化时,就会触发popstate事件。
2.2.新标准下路由的实现:
class Routers { constructor() { this.routes = {}; this._bindPopState(); } init(path) { history.replaceState({ path: path}, null, path); this.routes[path] && this.routes[path](); } route(path, callback) { this.routes[path] = callback || function() {}; } go(path) { history.pushState({ path: path}, null, path); this.routes[path] && this.routes[path](); } _bindPopState() { window.addEventListener('popstate', e => { const path = e.state && e.state.path; this.routes[path] && this.routes[path](); }); }}window.Router = new Routers();Router.init(location.pathname);const content = document.querySelector('body');const ul = document.querySelector('ul');function changeBgColor(color) { content.style.backgroundColor = color;}Router.route('/', function() { changeBgColor('yellow');});Router.route('/blue', function() { changeBgColor('blue');});Router.route('/green', function() { changeBgColor('green');});ul.addEventListener('click', e => { if (e.target.tagName === 'A') { e.preventDefault(); Router.go(e.target.getAttribute('href')); }});复制代码
3.使用路由模块来实现页面跳转的方式
- 方式1:直接修改地址栏
- 方式2:this.$router.push(‘路由地址’)
- 方式3:
<router-link to="路由地址"></router-link>