vue-router api学习

参数介绍：

base：类型string

默认值：'/'

具体的用途：应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"。

举个实际应用的例子：

const router = new VueRouter({
  mode: 'history',
  base:'/vue-spa-template-master/dist/',
  routes: routes
});

这个主要是在实际的开发中一个项目文件下，例如针对php，

该文件中的文件夹个大PHP专属文件夹，有前端专属的文件夹。所以生产的目录还有再多一层这时候base就起到的大作用

需求：想要转到：http://localhost/vue-spa-template-master/dist/hello

http://localhost/vue-spa-template-master/index.html

<head>
  <meta http-equiv="refresh" content="0,url=./dist">
</head>

作用是用根目录转到dist的index目录

linkActiveClass

类型: string
默认值: "router-link-active"
全局配置 <router-link> 的默认『激活 class 类名』

const router = new VueRouter({
  mode: 'history',
  base:'/vue-spa-template-master/dist/',
  routes: routes,
  linkActiveClass: 'active'
});

如果html存在

<router-link to="/hello">/hello</router-link>

当跳转到这个路由时,浏览器的html

<a href="/vue-spa-template-master/dist/hello" class="router-link-exact-active active">/hello</a>

scrollBehavior

注意: 这个功能只在 HTML5 history 模式下可用。

类型: Function

签名:

(
  to: Route,
  from: Route,
  savedPosition?: { x: number, y: number }
) => { x: number, y: number } | { selector: string } | ?{}

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

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的前进/后退按钮触发) 时才可用。

这个方法返回滚动位置的对象信息，长这样：

{ x: number, y: number }
{ selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)

如果返回一个 falsy (译者注：falsy 不是 false，参考这里)的值，或者是一个空对象，那么不会发生滚动。

eg、

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

对于所有路由导航，简单地让页面滚动到顶部。

返回 savedPosition，在按下后退/前进按钮时，就会像浏览器的原生表现那样：

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

如果你要模拟『滚动到锚点』的行为：

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
}

官方实例：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Home = { template: '<div>home</div>' }
const Foo = { template: '<div>foo</div>' }
const Bar = {
  template: `
    <div>
      bar
      <div style="height:500px"></div>
      <p id="anchor">Anchor</p>
    </div>
  `
}

// scrollBehavior:
// - only available in html5 history mode
// - defaults to no scroll behavior
// - return false to prevent scroll
const scrollBehavior = (to, from, savedPosition) => {
  if (savedPosition) {
    // savedPosition is only available for popstate navigations.
    return savedPosition
  } else {
    const position = {}
    // new navigation.
    // scroll to anchor by returning the selector
    if (to.hash) {
      position.selector = to.hash
    }
    // check if any matched route config has meta that requires scrolling to top
    if (to.matched.some(m => m.meta.scrollToTop)) {
      // cords will be used if no selector is provided,
      // or if the selector didn't match any element.
      position.x = 0
      position.y = 0
    }
    // if the returned position is falsy or an empty object,
    // will retain current scroll position.
    return position
  }
}

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  scrollBehavior,
  routes: [
    { path: '/', component: Home, meta: { scrollToTop: true }},
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar, meta: { scrollToTop: true }}
  ]
})

new Vue({
  router,
  template: `
    <div id="app">
      <h1>Scroll Behavior</h1>
      <ul>
        <li><router-link to="/">/</router-link></li>
        <li><router-link to="/foo">/foo</router-link></li>
        <li><router-link to="/bar">/bar</router-link></li>
        <li><router-link to="/bar#anchor">/bar#anchor</router-link></li>
      </ul>
      <router-view class="view"></router-view>
    </div>
  `
}).$mount('#app')

属性、

router.app

返回的vue实例，

可以通过router.app调用函数，调用data中的值

router.currentRoute：

设置当前的路由

eg、

import Vue from 'vue'
import VueRouter from 'vue-router'

// 1. Use plugin.
// This installs <router-view> and <router-link>,
// and injects $router and $route to all router-enabled child components
Vue.use(VueRouter)

// 2. Define route components
const Home = { template: '<div>home</div>' }// 3. Create the router
const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    { path: '/', component: Home },
  ]
})
new Vue({
  data:{a:111},
  router,
  template: `
    <div id="app">
      <h1>Basic</h1>
      <ul>
        <li><router-link to="/">/</router-link></li>
      </ul>
      <router-view class="view"></router-view>
    </div>
  `
}).$mount('#app')
console.log(router.app.a)  //1111

console.log(router.currentRoute) //返回router对象

fullPath:"/"

hash:"",

matched:[{…}],

meta:{},

name:undefined,

params:{},

path:"/",

query:{}

在Vue实例中使用

this.$router.currentRoute获取当前的地址

router.push

使用方法：

（1）this.$router.push({name: 'playerDetail', params: {id: this.audio.id}})

（2）this.$router.push({path:'/me'})

router.replace(location)

=====window.history.replaceState

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录

router.go(n)

====window.history.go

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)
 
// 后退一步记录，等同于 history.back()
router.go(-1)
 
// 前进 3 步记录
router.go(3)
 
// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

路由信息对象的属性

$route.path
- 类型: string
  
  字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。

$route.params
- 类型: Object
一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。
$route.query
- 类型: Object
  
  一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。

$route.hash
- 类型: string
  
  当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。

$route.fullPath
- 类型: string
  
  完成解析后的 URL，包含查询参数和 hash 的完整路径。

$route.matched
- 类型: Array<RouteRecord>
一个数组，包含当前路由的所有嵌套路径片段的路由记录。路由记录就是 routes 配置数组中的对象副本（还有在 children 数组）。
```
const router = new VueRouter({
  routes: [
    // 下面的对象就是 route record
    { path: '/foo', component: Foo,
      children: [
        // 这也是个 route record
        { path: 'bar', component: Bar }
      ]
    }
  ]
})
```
当 URL 为 /foo/bar，$route.matched 将会是一个包含从上到下的所有对象（副本）。
$route.name

当前路由的名称，如果有的话。