vue路由

SPA （ single page App ） 单页面应用

多页面应用
有多个html文件，通过a标签的连接联通各个页面

缺点

• 开发起来太冗余，编译、压缩很耗时间
• 页面之间的跳转速度太慢，这个时候就会出现一个严重的问题，白屏

单页面应用

• 不需要刷新页面，因为它就是一个页面
• 这个页面内容在切换
• 单页面内容之间的切换要想实现我们就是用路由了
• 如今我们的app、后台管理系统 主要的开发形式就是spa

vue路由功能

1. 实现单页面的切换
2. 路由携带参数
3. 路由的导航守卫
4. 路由进行数据预载（进入组件前就请求获得数据）

vue-router 基础

1. vue 路由的几种mode(模式)

hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。
history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】
abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。【 这个模式不常用 】

2.路由的使用步骤

1. 安装 vue-router `yarn add vue-router
2. 在src目录下创建一个router目录， 里面创建一个index.js文件 ， 这个目录就是router的模块
3. 引入第三方的依赖包, 并注册路由

  import Vue from 'vue'
  import VueRouter from 'vue-router'

  Vue.use( VueRouter ) //使用vue-router这个第三方插件

4. 创建了一个router对象实例，并且创建路由表

const routes = [ 
    {
      path: '/home',
      component: Home
    }//每一个对象就是一个路由
  ]
  const router = new VueRouter({
    routes//路由表  必写的
  })

5. 导出router实例

export default router

6. 入口文件main.js中引入路由实例 router , 然后在根实例中注册

 import router from './router/index.js'
  new Vue({
    router,
    render: (h) => App 
  }).$mount('#app')

7. 给路由一个路由展示区域
   如果是以及路由， 那么我们放在App组件中,用一个 router-view 的组件表示

 <router-view ></router-view>

8. 当页面第一次的打开的时候， 需要做一个重定向， 就是要自动跳转到 /home 这个路由上

   const routes = [
      { //我们要求这个路由的配置要放在路由表的最上方
        path: '/',
        redirect: '/home'
      }
    ]

9. 错误路由匹配

  {  //这个就是错误路由匹配， vue规定这个必须放在最下面，它必须将上面的路由全找一遍，找不到才用当前这个
        path: '**',
        redirect: '/error'
      }

10. vue路由模式的确定 mode

如果你使用的是 hash , 那么a标签就可以
如果你使用 history , 那么我们最好将a标签改成 router-link 这个组件

• router-link 这个组件 身上必须要有一个 to 属性
• router-link 这个组件身上加一个 keep-alive属性可以进行浏览器缓存

`

11. 二级路由

  const routes = [
         {
           path: '/shopcar',
           component: Shopcar,
           children: [
             {
               path: 'yyb', //不写  /
               component: Yyb
             }
           ]
         }
       ]

12. 命名路由

作用：简写路径

 {
      path: '/shopcar',
      component: Shopcar,
      //子路由 
      children: [
        { 
          path: 'login', // 容易犯错点  /login X 
          component: Login,
          name: 'login' //命名路由
        },
        {
          path: 'register',
          component: Register,
          name:'register'
        }
      ]
      
    },

• 使用

 <router-link :to = "{name:'login'}"/>

路由守卫（导航守卫）

导航守卫一共有三种形式

A: 全局导航守卫

1. 全局前置守卫(router.beforeEach(fn))
   fn有三个参数
   1.to
   2.from
   3.next

2. 全局的解析守卫 （router.beforeSolve(fn)）

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

3. 全局后置守卫 (router.afterEach(to.from))

可以做一些用户友好提示

B: 路由独享守卫 beforeEnter

• 写在路由表中的守卫钩子
• 针对的是和当前路由相关的，那么其他与之不相关的路由，它是无法监听它的变化情况的

C: 组件内守卫(重要)

1. 组件内的前置守卫 beforeRouteEnter((to,from,next)=>{})
2. 组件内的后置守卫 beforeRouteLeave((to,from,next)=>{})
3. 组件内更新守卫 beforeRouteUpdate((to,from,next)=>{})