vue-router 实战总结

• v3 文档

• v4 文档

要点

• 前端路由的核心:改变视图的同时不会向后端发出请求。因此未达到这目的，浏览器有两种支持：
  • hash ---> 即地址栏 URL 中的 # 符号
  • history --> 利用了 HTML5 History Interface 中的历史记录栈
    • pushState() 方法
    • replaceState() 方法
• 在 router.js 配置的 routes 信息会映射到.vue 页面的命名视图<router-view></router-view>

配置 router 与 .vue 的映射关系

    // router.js
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Rank from 'components/Rank/Rank'
    import Toplist from 'components/Toplist/Toplist
    import Bar from 'components/Bar/Bar

    Vue.use(VueRouter)

    export default new VueRouter({
        routes: [
            {
              path: '/rank',
              component: Rank,             // `单个组件`使用 `component`
              children: [
                {
                  path: ':id',
                  components: {             // `多个组件`使用 `components`
                    default: Toplist,       // 该未命名router-view的组件默认name属性为 `default`
                    aside: Bar              // 该命名router-view的组件name属性为 `aside`
                }
            }
        ]
    })

    // App.vue
    <template>
      <div id="app">
        <router-view class="view-wrapper toplist"></router-view>        // 该未命名router-view的组件默认name属性为 `default`
        <router-view class="view-wrapper bar" name="aside"></router-view>       // 该命名router-view的组件name属性为 `aside`
      </div>
    </template>

动态路由匹配

重定向 和 别名

向路由组件传递 props

在组件中使用 $route 会使之与其对应路由形成高度耦合

• 使用 props 将组件和路由解耦：

取代与 $route 的耦合

如：$route.params.id 取值耦合

const User = {
  template: '<div>User {{ $route.params.id }}</div>',
};
const router = new VueRouter({
  routes: [{ path: '/user/:id', component: User }],
});

通过 props 解耦

如：props: ['id'] 传值解耦

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>',
};
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false },
    },
  ],
});

进阶

导航守卫

router.go()与 router.back()区别

• go(-1): 原页面表单中的内容会丢失；

  • history.go(-1):后退+刷新；

  • history.go(1) ：前进

• back(): 原页表表单中的内容会保留；

  • history.back():后退 ；

  • history.back(0) 刷新；

  • history.back(1)：前进