vue路由

传统开发多个页面每次访问一个页面都要向浏览器发送请求，然后服务端再响应解析，在这个过程中肯定会存在延迟，但是现在vue、react都是SPA（单页面应用) 。在首次访问的时候会加载所有的资源。

后期前端路由中仿问一个新的界面的时候只是浏览器的路径改变了，没有和服务端交互「所以不存在延迟」，这个对用户体验来说是大大的提高

 

路由的两种模式以及区别

两种模式 hash 和 history

const router = new VueRouter({
  mode: 'hash',   //修改这个值切换路由模式
})

 

hash模式在路径里面会有一个#

history模式不存在#

但是使用history模式还有一个问题就是，在访问二级页面的时候，做刷新操作，会出现404错误，我们需要配置一下apache或是nginx的url重定向，重定向到你的首页路由上就ok啦

编程式导航及传参

<router-link to="/">Go to Home</router-link>
<!-- 路由出口 -->   <!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

js中书学
// 命名的路由，并加上参数，让路由建立 url
this.$router.push({ name: 'user', params: { username: 'eduardo' } })
this.$router.push({ name: 'user', query: { username: 'eduardo' } })
// 带查询参数，结果是 /register?plan=private
this.$router.push({ path: '/register', query: { plan: 'private' } })
this.$route.params  或者是 this.$route.query

 

传参的匹配规则

name跳转可以通过params或者是query传参，都可以

path跳转 只能用query传参

接收的地方使用对应的。params跳转 this.$route.params query : this.$route.query

两种传参方式的区别：

query传参，参数会在地址栏显示。刷新不消失

params传参 参数不在地址栏显示 刷新参数会消失

我怎样让参数刷新不消失。1我会改成query传参，如果是params的话。我们需要第一次接收的时候存到本地存储里面，刷新之后通过三目运算符取到对应的值

router 和route的区别：

router 是通过new VueRouter得到的。所以router是一个路由的实例。具有路由的一些方法。push.replace这些方法

route是正在跳转的一个局部源信息对象。包含了当前路由的一些信息。比方说name，path，params，query。

push 和replace的区别

$router.push({path:'home'})，本质是向history栈中添加一个路由，在我们看来是切换路由，但本质是在添加一个history记录

$router.replace({path:'home'})，//替换路由，没有历史记录

路由的原理

（1）、一是改变 hash 值，监听 hashchange 事件，可以兼容低版本浏览器

（2）、二是通过 H5 的 history API 来监听 popState 事件，使用 pushState 和 replaceState 实现

来实现了vue里面 this.$route.push this.$route.replace

• 2、hash 改变，不会导致浏览器刷新「请求服务器」

 

一、什么是SPA（SPA 的概念）

单页 Web 应用 (single-page application 简称为 SPA)，简单理解为：仅仅在web页面初始化时加载相应的HTML、JavaScript、CSS，一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转，而是利用 JavaScript 动态的变换HTML的内（采用的是div切换显示和隐藏），从而实现UI与用户的交互。

二、SPA的优缺点

1、优点：

（1）由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。得益于ajax，我们可以实现无跳转刷新，又多亏了浏览器的histroy机制，我们用hash的变化从而可以实现推动界面变化。

2、缺点： 不利于SEO优化，不利于爬虫的检索

以SPA方式开发的网站不容易管理也不够安全。因为没了一页一页的网页给搜索引擎的爬虫来爬，所以，在搜索引擎最佳化（SEO）的工作上，需要花费额外的功夫。因为没有换页，需要自定义状态来取代传统网页程序以网址来做判断。