vue 路由

SPA是Single-Page-Application的缩写，翻译过来就是单页应用。
在WEB页面初始化时一同加载Html、Javascript、Css。一旦页面加载完成，SPA不会因为用户操作而进行页面重新加载或跳转，取而代之的是利用路由机制实现Html内容的变换。

优点：
良好的用户体验，内容更改无需重载页面。
基于上面一点，SPA相对服务端压力更小。
前后端职责分离，架构清晰。

缺点：
由于单页WEB应用，需在加载渲染页面时请求JavaScript、Css文件，所以耗时更多。（懒加载等）
由于前端渲染，搜索引擎不会解析JS，只能抓取首页未渲染的模板，不利于SEO。 （服务端渲染等）
由于单页应用需在一个页面显示所有的内容，默认不支持浏览器的前进后退。（路由解决）

hash 路由模式

hash(#)是URL的锚点，代表的是网页中的一个位置，单单改变#后面的部分，浏览器只会滚动到相应的位置，而不会去后端请求网页资源，
也就是说#是用来指导浏览器动作的，对服务器端完全不起作用，HTTP请求中也不包括#；
同时每一次改变#后面的部分，都会在浏览器的访问历史中增加一个记录，当使用浏览器的“后退”按钮的时候，就可以返回上一个位置；
所以说Hash模式是使用锚点值的改变，根据不同的值，渲染指定DOM元素的不同数据。

#后面 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。每次 hash 值的变化，会触发hashchange 这个事件，通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听hashchange来实现更新页面部分内容的操作：

hash模式背后的原理是onhashchange事件，可以在window对象上监听这个事件:
window.onhashchange = function(event){
    console.log(event.oldURL, event.newURL);
}

当你选择mode类型之后，程序会根据你选择的mode 类型创建不同的history对象(hash:HashHistory 或 history:HTML5History 或 abstract:AbstractHistory)
switch (mode) {

  case 'history':

    this.history = new HTML5History(this, options.base)

    break

  case 'hash':

    this.history = new HashHistory(this, options.base, this.fallback)

    break

  case 'abstract':

    this.history = new AbstractHistory(this, options.base)

    break

  default:

    if (process.env.NODE_ENV !== 'production') {

      assert(false, `invalid mode: ${mode}`)

    }

}
HashHistory有两个方法：HashHistory.push()将新路由添加到浏览器访问历史的栈顶 和 HashHistory.replace()替换掉当前栈顶的路由
因为hash发生变化的url都会被浏览器记录（历史访问栈）下来，从而你会发现浏览器的前进后退都可以用了。这样一来，尽管浏览器没有请求服务器，但是页面状态和url一一关联起来。

history 路由模式

当我们使用history模式的时候进行页面跳转的时候，其vue-router原理是使用HTML5的新接口pushState和replaceState,
这两个接口的最大的特点就是改变URL地址，但却不刷新页面，注意！！！仅仅改变网址，网页不是真正的跳转了，也不会获取到新的资源，本质上，网页还是停留在原来的页面(index.html)。
举例：
打开首页后，你的URL显示www.xxx.com/home，这时候能正常显示，没问题，此时你进入到注册页，URL此时是www.xxx.com/home/reg，
这个时候，当你点击刷新时，浏览器就会拿着当前的地址www.xxx.com/home/reg去后台请求该资源，后台肯定没有对应的资源，所以就会报404找不到，这样就很明了了！

url中没有#,是全地址,所以 刷新页面 的时候会根据全地址取请求后台,后台也需要做对应的处理,否则页面请求不到就会404，配置apache或是nginx的url重定向，重定向到你的首页路由上就ok啦。
因为HTML5标准发布，多了两个 API，pushState() 和 replaceState()。通过这两个 API （1）可以改变 url 地址且不会发送请求，（2）不仅可以读取历史记录栈，还可以对浏览器历史记录栈进行修改。

除此之外，还有popState().当浏览器跳转到新的状态时，将触发popState事件.

修改历史状态
包括了pushState,replaceState两个方法,这两个方法接收三个参数:stateObj,title,url

window.history.pushState(stateObject, title, URL)

window.history.replaceState(stateObject, title, URL)
切换历史状态
包括back,forward,go三个方法，对应浏览器的前进forward，后退back，跳转go操作。 有同学说了，(谷歌)浏览器只有前进和后退，没有跳转，嗯，在前进后退上长按鼠标，会出来所有当前窗口的历史记录，从而可以跳转(也许叫跳更合适)：

history.go(-2);//后退两次

history.go(2);//前进两次

history.back(); //后退

hsitory.forward(); //前进

区别：
前面的hashchange，你只能改变#后面的url片段。而pushState设置的新URL可以是与当前URL同源的任意URL。
history模式则会将URL修改得就和正常请求后端的URL一样,如后端没有配置对应/user/id的路由处理，则会返回404错误
当用户刷新页面之类的操作时，浏览器会给服务器发送请求，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。

history模式怕啥
不怕前进，不怕后退，就怕刷新，（如果后端没有准备的话）,因为刷新是实实在在地去请求服务器的。

在history模式下，你可以自由的修改path。history模式最终的路由都体现在url的pathname中，这部分是会传到服务器端的，因此需要服务端对每一个可能的path值都作相应的映射。

当刷新时，如果服务器中没有相应的响应或者资源，会分分钟刷出一个404来。

abstract 路由模式

1.router
router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，包含了所有的路由包含了许多关键的对象和属性。例如history对象

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

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

2.route
route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

$route.path
字符串，等于当前路由对象的路径，会被解析为绝对路径，如 “/index/” 。

$route.params
对象，包含路由中的动态片段和全匹配片段的键值对

$route.query
对象，包含路由中查询参数的键值对。例如，对于 /index?id=1 ，会得到 $route.query.id == 1。

var router = new VueRouter({
  routes: [
    { path: '/login', component: login },
    { name:'register',path: '/register', component: register } 
  ]
})
this.$router.push('/login?id=10&name=zs')
或
this.$router.push({path:'/register',query:{id:5,name:'lili'}})
或
this.$router.push({name:'register',query:{id:5,name:'lili'}})


var router = new VueRouter({
  routes: [
    { path: '/login/:id/:name', component: login },// 这里不传入对应的参数（:/id/:name） 刷新页面 参数会消失,页面中就丢失了数据
    { name:'register', path: '/register/:id/:name', component: register }
  ]
})
this.$router.push('/login/12/ls')
或
this.$router.push({name:'register',params:{id:10,name:'lili'}})

1.  不带参数
 
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
 
2. query传参 
 
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
 
// this.$route.query.id
 
3. params传参
 
this.$router.push({name:'home',params: {id:'1'}})  // 只能用 name
 
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
 
// this.$route.params.id
 
4. query和params区别
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 刷新页面id还在
 
params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失

this.$router.push
跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面
this.$router.replace
跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)
this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数,0刷新当前页
window.history.back()   window.location.reload()

1非懒加载

    import Index from "@/components/index"
    const router = new Router({
        routes: [
            {
            path: '/',
            name: 'Index'
            component: Index,
            }
        ]
    })

2懒加载

      {
        path: "路由路径",
        component: () =>
          import(/* webpackChunkName: "chunk名称 用于代码分割 " */ "组件路径")
      }

     const Index = (resolve) => {
		 import('@/components/index').then((module) => {
		    resolve(module);
		  });
		};
	const router = new Router({
	    routes: [
	        {
	        path: '/',
	        name: 'Index'
	        component: Index,
	        }
	    ]
	})

const index = require('@/components/index');
const Index = resolve => require.ensure([], () => resolve(index), 'list');
const router = new Router({
    routes: [
        {
        path: '/',
        name: 'Index'
        component: Index,
        }
    ]
})

二.路由守卫

const router = new VueRouter({ ... })
 //全局前置守卫     常用语验证登录
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})
//全局解析守卫     和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用
router.beforeResolve((to, from, next) => {
  // ...
})
//全局后置钩子
router.afterEach((to, from) => {
  // ...
})

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      //路由独享的守卫
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

<template>
  ...
</template>
export default{
  data(){
     return{
    }
  },
  //  从另外的组件进入该组件前触发该钩子
 beforeRouteEnter(to, from, next) {
    console.log("todo before enter");
    console.log(this) // 这里获取不到上下文
    next(vm => { // next里面有一个回到函数可以获取到上下文，把请求到的数据塞到vue对象中
      console.log(vm.id)
      console.log(vm.msg)
      vm.test();
    });
  },
  //  同一个组件，param不同的是触发,常用与同一个组件当传入不通参数时，展示不同的数据
 beforeRouteUpdate(to, from, next){
    console.log("todo update enter")
    next();
  },
  //  该组件离开跳转到另外的组件时触发该钩子,常应用于用户表单，当用户填了一部分内容，需要提醒用户是否离开页面
 beforeRouteLeave(to, from, next){
    console.log("todo leave enter")
    if(global.confirm('are you sure')){
      next();
    }
  },
}

当点击切换路由时：beforeRouterLeave–>beforeEach–>beforeEnter–>beforeRouteEnter–>beforeResolve–>afterEach–>beforeCreate–>created–>beforeMount–>mounted–>beforeRouteEnter的next的回调