前端路由

父组件 this.$router.push({

name: 'B', params: {

XXX: '妈呀' }

})

子组件读取 this.num = this.$route.params.XXX//妈呀

方式D：这种不需要在路由配置好根据路由的名称，通过query来传递

路由配置不需要配置，但是子组件的name必须与父组件传递的路由一致{

父组件 this.$router.push({

path: '/child', query: {

XXX: '妈呀' }

})

子组件读取 this.num = this.$route.query.XXX

总的来说使用方式C和D最为多，毕竟不需要对路由配置做修改

前端路由

把不同路由对应不同内容或页面的任务交给前端来做，之前通过服务端根据 url 的不同返回不同的页面实现

前端路由实质上就是检测 URL 的变动，截获 URL 地址，通过解析、匹配路由规定实现 UI 更新

单页面应用中的路由分为hash和history模式

hash模式

监听浏览器地址hash值变化，执行事件

hash会在浏览器URL后增加 # 号

一个完整的的 URL 包含：协定、域名、端口、虚拟目录、文件名、参数、锚

比如 https://www.google.com/#abc中的hash值为abc 特点：hash的变化不会刷新页面，也不会发送给服务器

但hash的变化会被浏览器记录下来，来指导浏览器中的前进和后退

window.location.hash变化触发窗口onhashchange事件，监听hash变化

触发路由时视图容器更新——多数前端框架哈希路由的实现原理

只修改hash部分，不发请求 a标签可设置页面hash，浏览器自动设置hash

window.location.hash='abc';

let {hash}=window.location window.addEventListener('hashchange',function(){

//监听hash变化 })

特点

兼容性好

路径在#后面，不好看

history模式

H5新特性，允许直接修改前端路由，更新URL但不重新发请求，history可自定义地址

window.history属性指向 History 对象，表示当前窗口的浏览历史，保存了当前窗口访问过的所有页面网址

由于安全原因，浏览器不允许脚本读取这些地址，但允许在地址间导航

// 后退到前一个网址 history.back()

// 等同于 history.go(-1)

浏览器工具栏的“前进”和“后退”按钮，就是对 History 对象进行操作 History 对象主要有两个属性

History.length：当前窗口访问过的网址数量（包括当前网页）

History.state：History 堆栈最上层的状态值（详见下文）

// 当前窗口访问过多少个网页 window.history.length

// History 对象的当前状态 // 通常是 undefined

window.history.state

history.back()、history.forward()、history.go()

用于在历史之中移动

History.back()：移动到上一个网址，等于点击浏览器后退键。对于第一个访问的网址，该方法无效 History.forward()：移动到下一个网址，等于点击浏览器前进键。对于最后一个访问的网址，该方法无效

history.pushState()

在历史中添加一条记录，不会导致页面刷新

window.history.pushState(state, title, url)

state：对象，触发popstate事件将该对象传递到新页面。不需要可以填null title：新页面标题。但现在所有浏览器都忽视这个参数，所以可以填空串

url：新网址，必须与当前页面在同域。地址栏将显示这个网址

假定当前网址是example.com/1.html，使用pushState()在浏览记录（History 对象）中添加一个新记录

var stateObj = { foo: 'bar' };

history.pushState(stateObj, 'page 2', '2.html');

添加新记录后，浏览器地址栏显示example.com/2.html，但不会跳转到2.html，也不会检查2.html是否存在，它只是成为浏览历史的最新记录。这时，在地址栏输入一个新的地址(如访问google.com)，然后点击倒退按

钮，页面的 URL 将显示2.html；再点击一次倒退，URL 将显示1.html

pushState()不触发页面刷新，只导致 History 对象变化，地址栏有反应使用该方法后，可以用History.state读出状态对象

var stateObj = { foo: 'bar' };

history.pushState(stateObj, 'page 2', '2.html');

history.state // {foo: "bar"}

如果pushState的 URL 参数设置了一个新的锚点值（即hash），不会触发hashchange事件。反过来，如果 URL 的锚点值变了，会在 History 对象创建一条浏览记录

如果pushState()方法设置了一个跨域网址，报错

// 报错 // 当前网址为 http://example.com

history.pushState(null, '', 'https://twitter.com/hello');

pushState想要插入一个跨域的网址，导致报错。防止恶意代码让用户以为他们是在另一个网站上，因为这个方法不会导致页面跳转

history.replaceState()

修改 History 当前记录，其他与pushState()一模一样

history.pushState({page: 1}, 'title 1', '?page=1')

history.replaceState({page: 3}, 'title 3', '?page=3');

// URL 显示为 http://example.com/example.html?page=3

history.back()

// URL 显示为 http://example.com/example.html?page=1

history.back()

// URL 显示为 http://example.com/example.html

history.go(2)

// URL 显示为 http://example.com/example.html?page=3

popstate事件

当同一个文档的浏览历史变化触发popstate 注意

仅调用pushState() / replaceState()，不会触发只有点击浏览器倒退/前进，或调用History.back()、History.forward()、History.go()才会触发

只针对同一个文档，如果浏览历史切换，导致加载不同文档，不会触发

popstate指定回调函数

window.onpopstate = function (event) { console.log('location: ' + document.location);

console.log('state: ' + JSON.stringify(event.state));

};

// 或者 window.addEventListener('popstate', function (event) {

console.log('location: ' + document.location);

console.log('state: ' + JSON.stringify(event.state));

});

回调函数参数event事件对象，它的state指向当前状态对象，这个state也可以通过history对象读取

var currentState = history.state;

页面第一次加载不会触发popstate事件

特点

路径正规

兼容性不比hash，需服务端支持