vue基础（一） - VueRouter

VueRouter 官方的路由管理工具，可以用来构建单页面应用。

它主要包含以下功能：

1. 模块化的，基于组件的路由配置
2. 路由参数、查询、通配符
3. 基于Vue.js 过渡系统的视图过渡效果
4. 细粒度的导航控制
5. 嵌套的路由/视图表

动态的路由匹配

可以用来匹配动态的路径，例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

// 获取参数 :id
this.$route.params 
// 模板中操作
template: '<div>User {{ $route.params.id }}</div>'
// Get 请求
$route.query
// hash 值
$route.hash

嵌套路由

利用 children 参数处理嵌套路由器。

const router = new VueRouter({
  routes: [
    { 
      path: '/user/:id', 
      component: User,
      children: [
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

编程式导航

通过 push 等 路由方法，实现编程式导航。

例如：

声明式 <router-link :to="..."> | 编程式 router.push()

声明式 <router-link :to="..." replace> | 编程式 router.replace(...)

| 编程式 router.go(n)

// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
router.push({ path: `/user/${userId}` }) // -> /user/123
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

命名路由

通过一个名称来标识路由 name : user, 通常用于链接到其他路由或跳转页面的时候。

命名视图

用于同时展示多个平级视图，而不是嵌套展示。点击一个 router-link 显示相应的router-view

<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>

重定向 和 别名

配置重定向链接

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' },
    { path: '/a', redirect: { name: 'foo' }},
    { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})

路由组件传参

//  如果 props 被设置为 true，route.params 将会被设置为组件属性。
{ path: '/user/:id', component: User, props: true }

// 函数模式
// URL /search?q=vue 会将 {query: 'vue'} 作为属性传递给 SearchUser 组件。
{ path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }

导航守卫

1. 导航被触发。
2. 在失活的组件里调用离开守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

数据获取

有时候，进入某个路由后，需要从服务器获取数据。例如，在渲染用户信息时，你需要从服务器获取用户的数据。我们可以通过两种方式来实现：

1. 导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。

2. 导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。

参考：https://router.vuejs.org/zh/guide/advanced/data-fetching.html#%E5%AF%BC%E8%88%AA%E5%AE%8C%E6%88%90%E5%90%8E%E8%8E%B7%E5%8F%96%E6%95%B0%E6%8D%AE

总结

1. 定义跳转链接
   <router-link to="/foo">Go to Foo</router-link>
2. 访问当前路由的参数 变量
   this.$route.params.username
3. 访问路由器实例对象，在 Vue 实例内部，可以通过 $router 访问路由实例。如：

this.$router
this.$router.go(-1)
this.$router.push('/')