路由使用

1.路由跳转

this.$router.push('/home')
// 或者
this.$router.push({ path: '/home' })

// replace方法，不会向history添加记录
this.$router.replace('/home')

2.命名路由

this.$router.push({ name: 'home' })

3.动态路由匹配

// home.vue
this.$router.push('/detail/1')
// 或者
this.$router.push({ path: '/detail/1' })
// 或者
this.$router.push({ name: 'detail', params: { id: 1 } })

// detail.vue
// 获取id
let id = this.$route.patams.id

4.路由传参

// detail.vue
this.$router.push({ path: '/home', query: { name: 'Tom' } })

// home.vue
// 获取参数
let name = this.$route.query.name

5.路由回退

this.$router.back()
// 或者
this.$router.go(-1)

6.路由滚动

// router/index.js
scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}