vue前端路由讲解以及总结注意事项

1路由讲解
2vue路由跳转与winow.localtion.herf跳转区别
3vue 路由怎样在一个新窗口页面打开、
4vue路由传参(防止页面刷新参数丢失)
5通过window.location.href跳转项目任何一个页面
6 前端路由的实现原理（更新视图但不重新请求页面）

1在讲解路由之前，先讲一下路由的实现原理：更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中实现这一功能有以下这两种方式（详细介绍看第6点）：
利用URL中的hash("#");
利用History interface在HTML5中新增的方法;。
路由，其实就是指向的意思。但点击页面上的Home按钮时，页面就要显示home指向的路由页面。当点击about按钮时，页面就要显示about指向的页面。

路由中有三个基本的概念 route, routes, router。
route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等.。我们经常来用他来进行传参。
routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]

router 是路由管理器。当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。
注意：vue的 this.$router.push() push后面的，可以是字符串，也可以是对象，，对象有name和path这些，，如果是字符串，字符串是改变path的值

2单页内路由跳转（this.$router.push），产生的history变化，使得对应组件重新执行，但不刷新页面；但，使用href、window.location进行跳转，产生的history变化，将使得页面重新刷新。 此处顺便讲解以下window…location.replace和
window.location.href区别：
例子： 有3个页面 a,b,c
如果当前页面是c页面，并且c页面是这样跳转过来的：a->b->c
1：b->c 是通过window.location.replace("…xx/c") 此时b页面的url会被c页面代替，并且点击后退按钮时会回退到a页面（最开始的页面）
2：b->c是通过window.location.href("…xx/c") 此时b页面的路径会被c页面代替，但是点击回按钮后页面回退的是b页面
两者的区别: 两者后退时所回退的页面不一样

3vue 路由怎样在一个新窗口页面打开
vue-router在新窗口打开页面
let {href}=this.$router.resolve({name:‘application_detail’})
window.open(href,’_blank’);

4vue路由传参
vue路由刷新页面，导致传参消失处理。通过param进行传递参数，因为传过来的是url，这种传参，如果
刷新页面，会导致参数消失
解决方法：

         1 使用query进行传参  this.$router.push({ name: 'NewsDetail', query: { newsUrl: url } })　
         获取值  this.$route.query.queryName;
          2 使用params传值 在配置路由处做修改。
          routes: [
				    {
				      path: '/list/:id',
				      name: 'list'
				    }
          ]；
          this.$router.push({name:'list', params:{id: id}});
          获取id：this.$route.params.id
          另外，如果id值是可传可不传的，路由可以进行这样的配置(在参数后面加上问号?)：
           routes: [
				    {
				      path: '/list/:id?',
				      name: 'list'
				    }
          ]；

5通过window.location.href跳转项目任何一个页面 这里的/view表示项目根目录下
window.location.href = “/myCenter/train_order_list” 这里的/mycenter表示根目录下的mycenter文件夹
下的train_order_list文件

6 前端路由的实现原理
如何实现前端路由（更新页面url但不刷新页面）。
要实现前端路由，需要解决两个核心：
1如何改变URL却不引起页面刷新？
2如何检测URL变化了？
改变URL的方式只有这几种方式：
1 通过浏览器的前进和后退改变 url，
2通过 标签改变URL，
3通过window.location改变URL。
下面分别使用 hash 和 history 两种实现方式回答上面的两个核心问题。
hash实现
1hash是URL中hash（#）及后面的那部分，常用作秒点在页面进行导航，改变url中的hash部分不会引起页面刷新
2通过hashchange 事件监听URL的变化，当URL改变的时候，会触发hashchange事件

history实现
history 提供了pushState和replaceState两个方法。这两个方法改变URL的path部分不会引起页面刷新
history 提供类似hashchange事件的popstate事件，但popstate事件有些不同，通过浏览器前进后退改变utl时会触发popState事件，通过pushState/replaceState或标签改变URL不会触发popstate事件，好在我们可以拦截pushState/placeState的调用和的点击事件来检索URL变化，通过监听URL变化可以实现，只是没有hashchange那么方便。

参考文档： https://www.cnblogs.com/lguow/p/10921564.html