Vue Router 学习 new Router

``` import Vue from 'vue' import Router from 'vue-router' import routes from './routes'

Vue.use(Router)

const router = new Router({ routes,

// * 未添加 mode: http://localhost:8080/#/login // * 添加 mode: http://localhost:8080/login mode: 'history',

// * 不是所有流浪器都支持 history 模式，如果遇到不支持的时候，需要设置 fallback 为 true，它会自动帮我们转成哈希去处理 // * 如果你设置成 false，在不支持的情况下，那么单应用就会变成多应用，你每次路由跳转都会去后端然后返回新的内容，所以一般都是设置成 ture 要它去自动处理就好了 fallback: true,

// * 未添加 base: 链接与(未添加 mode || 添加 mode)时无变化 // * 添加 base: http://localhost:8080/base/login // base: '/base/',

// * linkActiveClass & linkExactActiveClass 这两个都是用来配置可点击链接的类名的 // * 例如： 跳转Login // * 在源码中默认是这么显示的： 跳转Login // * 可以看到里面的 class 默认是 router-link-exact-active 以及 router-link-active // * 但是如果使用下面的两个属性配置之后则会显示成：跳转Login // * 可以看到里面的 class 现在是 exact-active-link 以及 active-link // * 这样就方便我们自己自定义类名了 linkActiveClass: 'active-link', linkExactActiveClass: 'exact-active-link',

// * 控制滚动位置 scrollBehavior (to, from, savedPosition) { if (savedPosition) { // 有缓存位置则下次回到原来的位置 return savedPosition } else { // 没有缓存位置则从0开始 return { x: 0, y: 0 } } },

// * 什么叫Query？ 就是 http://localhost:8080/login?a=xxx&p=xxx 链接 ？后面的搜索参数 // * 如果有什么特殊需求可以通过这两个函数进行自定义 // parseQuery (query) { // // 接收到的参数 query 是一个字符串 // }, // stringifyQuery (obj) { // // 接收到的参数 obj 是一个对象 // } })

export default router ```