vue:router

this.$router.go()

  // go forward by one record, the same as history.forward()
  router.go(1)

  // go back by one record, the same as history.back()
  router.go(-1)

  // go forward by 3 records
  router.go(3)

this.$router.push('/')

  // literal string path
  router.push('home')
  // object
  router.push({ path: 'home' })
  // named route
  router.push({ name: 'user', params: { userId: 123 }})
  // with query, resulting in /register?plan=private
  router.push({ path: 'register', query: { plan: 'private' }})

注意：params如果path提供了a，则会被忽略，但不是这种情况query，如上例所示。相反，您需要提供name路由或path使用任何参数手动指定整个：

  const userId = 123
  router.push({ name: 'user', params: { userId }}) // -> /user/123
  router.push({ path: `/user/${userId}` }) // -> /user/123
  // This will NOT work
  router.push({ path: '/user', params: { userId }}) // -> /user
  router.replace(location, onComplete?, onAbort?)

它的作用就像router.push，唯一的区别是它导航而不推送新的历史条目，顾名思义 - 它取代了当前的条目。
$ route.path
类型： string
一个等于当前路径路径的字符串，始终解析为绝对路径。例如"/foo/bar"。
$ route.params
类型： Object
包含动态线段和星形线段的键/值对的对象。如果没有参数，则该值将是空对象。
$ route.query
类型： Object
包含查询字符串的键/值对的对象。例如，对于路径/foo?user=1，我们得到$route.query.user == 1。如果没有查询，则该值将是空对象。
$ route.hash
类型： string
当前路由的哈希值（#如果有）。如果没有散列，则该值将为空字符串。
$ route.name
当前路由的名称（如果有）。（参见命名路线）

  <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
  router.push({ name: 'user', params: { userId: 123 }})
  $ route.redirectedFrom

正在重定向的路由的名称（如果有的话）。（请参阅重定向和别名）
重定向也在routes配置中完成。要重定向/a到/b：

  const router = new VueRouter({
    routes: [
      { path: '/a', redirect: '/b' }
    ]
  })

重定向也可以定位到命名路线：

  const router = new VueRouter({
    routes: [
      { path: '/a', redirect: { name: 'foo' }}
    ]
  })

甚至使用函数进行动态重定向：

  const router = new VueRouter({
    routes: [
      { path: '/a', redirect: to => {
        // the function receives the target route as the argument
        // return redirect path/location here.
      }}
    ]
  })

模版：

  const User = {
    template: `
      <div class="user">
        <h2>User {{ $route.params.id }}</h2>
        <router-view></router-view>
      </div>
  }

  const router = new VueRouter({
    routes: [
      // dynamic segments start with a colon
      { path: '/user/:id', component: User，children: [
          {
            // UserProfile will be rendered inside User's <router-view>
            // when /user/:id/profile is matched
            path: 'profile',
            component: UserProfile
          },
          {
            // UserPosts will be rendered inside User's <router-view>
            // when /user/:id/posts is matched
            path: 'posts',
            component: UserPosts
          }
        ]}
    ]
  })

命名视图
有时您需要同时显示多个视图而不是嵌套它们，例如创建具有sidebar视图和main视图的布局。这就是命名视图派上用场的地方。您可以拥有多个并为每个插座指定一个名称，而不是在您的视图中只有一个插座。router-view没有名字的A 将default作为其名称。

  <router-view class="view one"></router-view>
  <router-view class="view two" name="a"></router-view>
  <router-view class="view three" name="b"></router-view>

通过使用组件呈现视图，因此多个视图需要同一路径的多个组件。确保使用components（带有s）选项：

  const router = new VueRouter({
    routes: [
   { path: '*', component: NotFoundComponent }，
      {
        path: '/',
        components: {
          default: Foo,
          a: Bar,
          b: Baz
        }
      }
    ]
  })

滚动行为
使用客户端路由时，我们可能希望在导航到新路由时滚动到顶部，或者保留历史条目的滚动位置，就像实际页面重新加载一样。vue-router允许您实现这些甚至更好，允许您完全自定义路线导航中的滚动行为。
注意：此功能仅在浏览器支持时才有效history.pushState。
创建路由器实例时，可以提供以下scrollBehavior功能：

  const router = new VueRouter({
    routes: [...],
    scrollBehavior (to, from, savedPosition) {
      // return desired position
    }
  })

该scrollBehavior函数接收to和from路由对象。第三个参数savedPosition仅在这是popstate导航（由浏览器的后退/前进按钮触发）时才可用。
该函数可以返回滚动位置对象。该对象可以是以下形式：

  { x: number, y: number }
  { selector: string, offset? : { x: number, y: number }} （仅在2.6.0+中支持偏移）

如果返回假值或空对象，则不会进行滚动。
例如：

  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
        // , offset: { x: 0, y: 10 }
      }
    }
  }

我们还可以使用路径元字段来实现细粒度的滚动行为控制。在这里查看完整的示例。
＃异步滚动
2.8.0中的新功能
您还可以返回一个解析为所需位置描述符的Promise：

  scrollBehavior (to, from, savedPosition) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({ x: 0, y: 0 })
      }, 500)
    })
  }

可以将这与来自页面级转换组件的事件联系起来，以使滚动行为与页面转换很好地配合，但由于用例中可能存在差异和复杂性，我们只需提供此原语以启用特定的用户区实现。

路由地址改变后销毁定时器

  data () {
    return {
      timer: null   //定义
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
    console.log('组件销毁之前销毁定时器')
  }
  
  methods: {
  	funName () {
  		//设置定时器
  		  this.timer = setInterval(() => {
  		    ...
  		  }, 1500)
  	}
  },