Vue Router浅析

1. 动态路由匹配，:blogId就是动态获取url段来访问不同的组件

   const router =  new Router({
   routes: [
    {
      path: '/detail/:blogId',
      component: () => import('@/pages/Detail/template.vue')
    }
   ]
   })

2. 嵌套路由,路由里包含下级路由

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

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

3. 编程式导航，就是类似于js的location.href = ‘…..’跳转，只不过这是vue版，等同于

   router.push(location, onComplete?, onAbort?)

   onComplete时导航完成时调用，onAbort时导航终止时调用。这两个都是回调。

4. 命名路由，就是给路由加name属性

   const router = new VueRouter({
   routes: [
    {
      path: '/user/:userId',
      name: 'user',//就是这个
      component: User
    }
   ]
   })

5. 命名视图，同级展示多个视图，比如同时展示顶部栏、侧边栏

   <router-view class="view one"></router-view> //这里的没有name属性，所以下方就用default了
   <router-view class="view two" name="a"></router-view>
   <router-view class="view three" name="b"></router-view>

   const router = new VueRouter({
   routes: [
    {
      path: '/',
      components: { //注意带s
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
   ]
   })

6. 重定向，从/a重定向到/b

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

   别名是什么？访问/b，实际程序走的是/a，只是看起来是/b而已。

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

7. 路由组件传参。。。这里先留着空位

8. HTML5 History 模式

路由的 history 模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。