对Vue Router 路由管理器的原理及用法的理解与思考(1)

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() 方法接受三个参数:

  1. state object: 一个与新历史记录条目关联的JavaScript对象。这个对象可以通过 popstate 事件的 state 属性访问。
  2. title: 新的历史记录条目的标题。在大多数浏览器中,这个参数被忽略,因为标题是由 document.title 属性控制的。
  3. URL: 新的历史记录条目的 URL。这个 URL 必须与当前页面的域名相同。

示例

// 假设我们有一个单页面应用程序,我们想添加一个新的历史记录条目 // 并更新 URL 为 "/new-page",同时不引起页面刷新

history.pushState({page: "newPage"}, "New Page Title", "new-page");

在这个例子中,我们创建了一个新的历史记录条目,其中包含一个状态对象 {page: "newPage"}。这个状态对象可以在 popstate 事件的回调函数中访问。

replaceState():类似于 pushState(),它也允许你修改浏览器的历史记录堆栈,但它不是在历史堆栈中添加一个新的条目,而是替换当前条目。(即停留在当前窗口)

replaceState() 的基本用法

replaceState() 方法同样接受三个参数:

  1. state object: 一个与当前历史记录条目关联的JavaScript对象。这个对象可以通过 popstate 事件的 state 属性访问。
  2. title: 历史记录条目的标题。与 pushState() 一样,这个参数在大多数浏览器中被忽略,因为标题是由 document.title 属性控制的。
  3. 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代码规范提示报错

解决方法:

定义路由的步骤:

  • 19
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值