Vue router的实现原理的核心是:1.改变url页面不刷新,2.改变url时,可以监听到路由的变化并能够做出一些处理。
路由的两种模式
Hash模式:Hash是URL中hash(#)及后面的那部分(如https://example.com/#user)橙色部分就是hash。常用作描点在页面内进行导航,hash值的变化并不会导致浏览器向服务器发出请求,不发出请求,也就不会刷新页面。同理也不需要在服务器作任何特殊的处理(因此不利于SEO)【SEO:搜索引擎优化。目标是增加网站在搜索引擎结果页面(SERP)中的可见性,从而吸引更多的有机流量(即非付费流量)。】之后通过主动跳转或者监听hashchange事件监听URL的变化即可实现我们的目标。
HTML5模式(History):提供了两个方法pushState()和replaceState(),这两个方法改变URL的path部分不会引起页面刷新。通过浏览器前进,后退改变URL时会触发popState事件,而通过pushState()和replaceState()改变URL不会触发popState事件。
pushState():允许修改浏览器的历史记录堆栈,并更新 URL 而不引起页面刷新。(即新增一个窗口)
pushState()
的基本用法
pushState()
方法接受三个参数:
- state object: 一个与新历史记录条目关联的JavaScript对象。这个对象可以通过
popstate
事件的state
属性访问。 - title: 新的历史记录条目的标题。在大多数浏览器中,这个参数被忽略,因为标题是由
document.title
属性控制的。 - URL: 新的历史记录条目的 URL。这个 URL 必须与当前页面的域名相同。
示例
// 假设我们有一个单页面应用程序,我们想添加一个新的历史记录条目 // 并更新 URL 为 "/new-page",同时不引起页面刷新
history.pushState({page: "newPage"}, "New Page Title", "new-page");
在这个例子中,我们创建了一个新的历史记录条目,其中包含一个状态对象 {page: "newPage"}
。这个状态对象可以在 popstate
事件的回调函数中访问。
replaceState():类似于 pushState()
,它也允许你修改浏览器的历史记录堆栈,但它不是在历史堆栈中添加一个新的条目,而是替换当前条目。(即停留在当前窗口)
replaceState()
的基本用法
replaceState()
方法同样接受三个参数:
- state object: 一个与当前历史记录条目关联的JavaScript对象。这个对象可以通过
popstate
事件的state
属性访问。 - title: 历史记录条目的标题。与
pushState()
一样,这个参数在大多数浏览器中被忽略,因为标题是由document.title
属性控制的。 - URL: 要导航到的 URL。与
pushState()
一样,这个 URL 必须与当前页面的域名相同。
示例
// 假设我们想替换当前历史记录条目,并更新 URL 为 "/new-page",同时不引起页面刷新 history.replaceState({page: "newPage"}, "New Page Title", "new-page");
在这个例子中,我们使用 replaceState()
替换了当前历史记录条目,并更新了 URL 为 "/new-page"。与 pushState()
不同的是,使用 replaceState()
后,用户将无法使用浏览器的后退按钮返回到替换前的状态。
Vue Router的使用方法,有安装引入和直接引入,使用npm安装。
npm install vue-router@next --save (--save的作用是将依赖保存到package.json文件中)
Vue Router的使用
在src/views的里面新增自己需要的页面。如图
在主页面内添加路由容器<router-view></router-view>,如图
定义路由的步骤(重点)
定义路由中出现的bug,eslint代码规范提示报错
解决方法:
定义路由的步骤: