路由实例的其他配置

创建路由实例后，除了需要对其进行构造配置（ routes ）外，还可以进行以下配置：

• base  应用的基路径

类型: string
默认值: "/"

# 如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"

• 全局配置 <router-link> 的默认『激活 class 类名』

类型: string
默认值: "router-link-active"   // 即，链接激活时，默认添加了 router-link-active 的类名

// 自定义

   export default new Router({
	linkActiveClass:'active',
	routes:[]
   })

路由模式 mode

• hash: 使用 URL hash 值来作路由，支持所有浏览器（ 包括不支持 HTML5 History Api 的浏览器 ）
• history ？！: 依赖HTML5 History API和服务器配置
• abstract: 支持所有 JS 运行环境，如 Node 服务器端。若发现没有浏览器的 API，路由会自动强制进入该模式

类型: string
默认值: "hash" (浏览器环境) | "abstract" (Node.js 环境)
可选值: "hash" | "history" | "abstract"

滚动行为 scrollBehavior                                

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。

vue-router 能做到，而且更好，它可以自定义路由切换时页面如何滚动。

注意：该功能只在 HTML5 history 模式下可用

[ 基本原理 ] 创建路由实例后，使用 scrollBehavior 方法，该方法在前进、后退或切换导航时触发。

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})

# 参数说明：该方法返回 to 和 from 路由对象
# 第3个参数savedPosition，当且仅当点击浏览器的前进/后退按钮时才触发，返回滚动条的坐标 {x:num,y:num}

[ 示例 1 ] 如果返回一个布尔假的值，或者是一个空对象，那么，不会发生滚动

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

[ 示例 2 ] 点击导航进行切换时，滚动到页面顶部；通过前进、后退按钮进行切换时，保持坐标位置

const router = new VueRouter({
  mode:'history',
  routes ,
  scrollBehavior (to, from, savedPosition){
    if(savedPosition){
      return savedPosition;
    }else{
      return {x:0,y:0}
    }
  }
})

[ 示例 3 ] 还可以模拟滚动到锚点的行为

<div id="app">
    <router-view></router-view>
    <br>
  <p>
    <router-link to="/" exact>index</router-link>
    <router-link :to="{name:'foo' ,hash:'#abc'}">Go to Foo</router-link>
    <router-link :to="{ name: 'bar' }">Go to Bar</router-link>
  </p>
</div>

const router = new VueRouter({
  mode:'history',
  routes ,
  scrollBehavior (to, from, savedPosition){
    if(to.hash){
      return {
        selector: to.hash
      }
    }
    if(savedPosition){
      return savedPosition;
    }else{
      return {x:0,y:0}
    }
  }
})