1. History 模式 和 hash 模式

//配置方式
const router = new VueRouter({
  mode: 'history'
})

hash本质上是改变window.location的href属性，你只能改变#后面的url片段。 我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新

history接口是HTML5新增的, history 它有五种模式改变URL而不刷新页面.

2.路由配置详解

routes 配置

{
  path: string, // url路径
  component: Component,//非命名视图
  name: string, // 命名路由，给路由起个名字
  components: { name1: Component1，name2: Component2}, // 命名视图组件
  redirect: string | Location | Function,//重定向
  props?: boolean | Object | Function,//
  alias: string | Array<string>,//别名
  children: Array<RouteConfig>, // 嵌套的子路由
  beforeEnter?: (to: Route, from: Route, next: Function) => void,//可以添加路由监听
  meta: {{isData: true}},//存一些自己定义的参数啥的
  caseSensitive: boolean, // 匹配规则是否大小写敏感？(默认值：false)
  pathToRegexpOptions: Object // 编译正则的选项
}

VueRouter配置

const router = new VueRouter({
  mode: 'history',//路由模式控制 history 和 hash
  routes：routes // 路由列表
  base： '/' ,  //路由前缀
  scrollBehavior (to, from, savedPosition) {
      // return {x:0，y:0}期望滚动到哪个的位置
  }
})

3 .路由传参

（1）params 刷新页面参数会丢失

定义   {path:user/:name''}   
传     <router-like to="user/name" /> 
取   this.$route.params.name

 传  this.$router.push({ name: 'news', params: { userId: 123 }})      
 取  this.$route.params.userId

（2）query 刷新页面参数不丢失

传   his.$router.push({ path: '/news', query: { userId: 123 }});       
取   this.$route.query.userId

4.路由守卫（其实就是监听路由状态）

全局守卫：

跳转前： router.beforeEach((to,from,next)=>{

to: Route: 即将要进入的目标 [路由对象]

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。

next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。

next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在router-link 的 to prop 或 router.push中的选项。

next(error)导航会被终止且该错误会被传递给 router.onError()注册过的回调

})

跳转后 ： router.afterEach((to,from)=>{// ...})

路由守卫

beforeEnter: (to, from, next) => { }

组件守卫

beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

5.方法

router.push(url) 导航到新url，向 history栈添加一条新访问记录，等同于window.history.pushState

router.replace(url) 导航到新url，替换 history 栈中当前记录，等同于window.history.replaceState

router.go(n) 在 history 记录中向前或者后退多少步，类似 window.history.go(n)

router.go(1) 在浏览器记录中前进一步，等同于 history.forward()

router.go(-1) 后退一步记录，等同于 history.back()

router.go(0) 刷新当前页面

router.back() 导航回退一步，类似于router.go(-1)

router. forward() 导航前进一步，但是不刷新前进页的表单，类似于router.go(1)