• 我们使用路由来干什么呢？

  个人理解：在前端我们做单页面的开发时，常使用路由来实现页面的跳转，Vue给出了我们Vue-router插件，来实现我们对组件的切换

>> 4步路由的理解直接搞定--->

//1.引入Vue-router插件
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//2.我们实例化路由对象
const router = new VueRouter({
  mode: 'hash',
  routes
})

//3.在我们的app.js里加载Vue-router模块
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

//4.定义我们的路由
const routes = [
  {
    path: '/',
    redirect: '/all'
  },
  {
    name: 'all',
    path: '/all',
    component: all,
    children:[
     //子路由（先不管后续讲）.....
    ]
    
  },
]

个人总结:一个组件有一个或者多个视图（router-view即为子组件加载的地方,当然写在一个页面也无妨）,子组件有多个router-link,一个路由对应一个组件（当然也可以多个），当你访问这个路由时就会加载这个组件。

一 .Vue-router知识点

通常用来一个组件加载多个视图

1.命名视图()

• 有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。
• 一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件

<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: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

2.命名路由

有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候

 <router-link :to="{ name: 'user', params: { userId: 123}}">User</router-link>         

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

3.精准匹配（eg：匹配路由全部）

通常实现来高亮

-exact-active-class
配置当链接被精确匹配的时候应该激活的 class。注意默认值也是可以通过路由构造函数选项 linkExactActiveClass 进行全局配置的

<router-view class=" two" name="/a?1" exact-active-class= 'active'></router-view>
<router-view class="three" name="/b?2"  exact-active-class='active></router-view>

4.动态路由

通常我们在一个导航对应一个页面，而且这几个页面调用一个借口，只是传参不同，此时用动态路由

• 路由中组件载入这么配

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

• 子组件中router-link传参这么配

 <router-link to="/item/1" tag="li" class="floor-router">
           男装
</router-link>

然后在父组件加载其他的组件中watch路由的变化（$route.params）
----上面的案例对应的是（{id:1}）

二：Vue-router进阶知识

导航守卫

（注意：如果玩过狼人杀的话，这里应该会很好理解，接下来是一套狼人杀的套路！！！）

1.组件内部的守卫

！！仔细看注释

const Foo = {
 template: `...`,
 beforeRouteEnter (to, from, next) {
   // 在渲染该组件的对应路由被 confirm 前调用
   // 不！能！获取组件实例 `this`
   // 因为当守卫执行前，组件实例还没被创建
 },
 beforeRouteUpdate (to, from, next) {
   // 在当前路由改变，但是该组件被复用时调用
   // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
   // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
   // 可以访问组件实例 `this`
 },
 beforeRouteLeave (to, from, next) {
   // 导航离开该组件的对应路由时调用
   // 可以访问组件实例 `this`
 }
}

2.全局钩子

2.1全局守卫

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中

router.beforeEach((to, from, next) => {
  // ...
})

//确保要调用 next 方法，否则钩子就不会被 resolved。

2.2全局解析守卫

2.5.0 新增

在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用

2.3全局后置钩子

router.afterEach((to, from) => {
  // ...
})

3.路由独享的守卫

可以拦截子组件，只判断当前组件（很少用）

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

组件内部守卫：beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
全局守卫：beforeEach
afterEach
beforeResolve
路由守卫：beforeEnter

5.路由元信息

通常用来做路由转化，监听路由来实现 过度动画

完整的导航解析流程

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