Vue-8

Router

SPA （ single page App ） 单页面应用

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

• 缺点
  • 开发起来太冗余，编译、压缩很耗时间
  • 页面之间的跳转速度太慢

1. 单页面应用

• 不须要刷新页面，由于它就是一个页面
• 这个页面内容在切换
• 单页面内容之间的切换要想实现咱们就是用路由了
• 现在咱们的app主要的开发形式就是spa

vue路由功能

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

vue-router 基础

1. vue 路由的mode(模式)有几种， 分别是什么？在那些环境下运行？

   • hash: 使用 URL hash 值来做路由。支持全部浏览器，包括不支持 HTML5 History Api 的浏览器。 /#home

   • history: 依赖 HTML5 History API 和服务器配置。【须要后端支持】 /home

   • abstract: 支持全部 JavaScript 运行环境，如 Node.js 服务器端。若是发现没有浏览器的 API，路由会自动强制进入这个模式。【 这个模式不经常使用 】
2. 路由的使用步骤
   1. 安装 vue-router yarn add vue-router -S
   2. 在src目录下建立一个router目录， 里面建立一个index.js文件 ， 这个目录就是router的模块

   3. 引入第三方的依赖包, 并注册路由
      ```javascript
      import Vue from 'vue'
      import VueRouter from 'vue-router'

      Vue.use( VueRouter ) //使用vue-router这个第三方插件
      ```
      注意： import这个关键字要放在整个文件的上层
   4. 建立了一个router对象实例，而且建立路由表
      javascript const routes = [ { path: '/home', component: Home }//每个对象就是一个路由 ] const router = new VueRouter({ routes//路由表 必写的 })
   5. 导出router实例
      export default router
   6. 入口文件main.js中引入路由实例 router , 而后在根实例中注册
      javascript import router from './router/index.js' new Vue({ router, render: (h) => App }).$mount('#app')
   7. 给路由一个路由展现区域
      1. 若是是以及路由， 那么咱们放在App组件中,用一个 router-view 的组件表示

      <router-view />

   8. 当页面第一次的打开的时候， 须要作一个重定向， 就是要自动跳转到 /home 这个路由上
      javascript const routes = [ { //咱们要求这个路由的配置要放在路由表的最上方 path: '/', redirect: '/home' } ]
   9. 业务： 错误路由匹配，
      javascript const routes = [ { path: '/', redirect: '/home' //重定向 }, { path: '/home', component: Home }, { path: '/list', component: List }, { path: '/detail', component: Detail }, { path: '/login', component: Login }, { path: '/register', component: Register }, { path: '/user', component: User }, { path: '/shopcar', component: Shopcar }, { path: '/error', component: Error }, { //这个就是错误路由匹配， vue规定这个必须放在最下面，它必须将上面的路由全找一遍，找不到才用当前这个 path: '**', redirect: '/error' } ]

   10. vue路由模式的肯定 mode
       1. 若是你使用的是 hash , 那么a标签就能够了、
       2. 若是你使用 history , 那么咱们最好将a标签改为 router-link 这个组件
       - router-link 这个组件 身上必需要有一个 to 属性
       - router-link 这个组件身上加一个 keep-alive属性能够进行浏览器缓存

   11. 二级路由
       javascript const routes = [ { path: '/shopcar', component: Shopcar, children: [ { path: 'yyb', //不写 / component: Yyb } ] } ]
       - 注意： 写好配置以后，不要忘记了， 在对应的一级路由的组件中书写 路由展现区域

   12. 命名路由

       做用： 就是简写路径了

       {
             path: '/shopcar',
             component: Shopcar,
             //子路由 
             children: [
               { 
                 path: 'yyb', // 容易犯错点  /yyb X 
                 component: Yyb,
                 name: 'yyb' //命名路由
               },
               {
                 path: 'junge',
                 component: Junge
               }
             ]
       
           },

       • 使用：

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

         vue-router 进阶

         动态路由 & 路由传参 & 路由接参

• 动态路由：
  • url中路由是改变的，可是改变路由公用一个组件
  • 举例：
    • localhost:3000/detail/001?a=1&b=2
      
    • localhost:3000/detail/002?a=2&b=3
    • detail
• vue cli3 配置反向代理 20分钟
  • 在根目录下面新建一个 vue.config.js

  // vue.config.js中能够默认直接使用  http-proxy-middleware
  module.exports = {
    devServer: {
      proxy: {
        '/douban': { // /douban 是一个标记
          target: 'http://api.douban.com', // 目标源
          changeOrigin: true, // 修改源
          pathRewrite: {
            '^/douban': '' 
          }
        },
        '/siku': {
          target: 'https://android.secoo.com',
          changeOrigin: true,
          pathRewrite: {
            '^/siku': ''
          }
        }
      }
    }
  }

• 路由的传参

<router-link :to = "{name: 'list',params: {id: xxx}, query: {xxx:xxx}}"></router-link>

• 路由的接参
  • 咱们发现凡是使用了路由的组件，咱们统称为： 路由组件
  • 路由组件身上会自动添加一个 $route的数据

  id: this.$route.params.id
    query: this.$route.query.xxx

• 编程式导航
  • push
    • this.$router.push('/home')
    • this.$router.push({name,params,query})
    • push能够将咱们的操做存放到浏览器的历史记录
  • replace
    • this.$router.replace('/home')
    • this.$router.replace({name,params,query})
    • replace没有将咱们的操做存放到浏览器的历史记录， 效果为返回了二级
• 业务：
  • 按钮的返回
    • push
    • replace
    • back
    • go

路由进阶部分 -- 导航守卫（ 路由守卫 ）

1. 做用： --- 相似 【保安】
   • 守卫路由
     • 进
       • 举例： 携带数据进
     • 出
       • 举例： 事情完成才能出
2. 导航守卫一共有三种形式
   • A: 全局导航守卫
     1. 全局前置守卫 router.beforeEach(fn)
        1. fn中有三个参数
     2. 全局的解析守卫
        1. 在 2.5.0+ 你能够用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 相似，区别是在导航被确认以前，同时在全部组件内守卫和异步路由组件被解析以后，解析守卫就被调用。
        2. 必须保证整个项目的守卫和异步路由组件解析完成
     3. 全局的后置守卫
        • 能够作一些用户友好提示
   • B: 路由独享守卫 beforeEnter
     • 写在路由表中的守卫钩子
     • 针对的是和当前路由相关的，那么其余与之不相关的路由，它是没法监听它的变化状况的
   • C: 组件内守卫
     • 组件内的前置守卫 beforeRouteEnter((to,from,next)=>{})
       • 导航进入组件时，调用
       • this是访问不到的，若是非要访问this ,必须经过 next(vm=>{})访问
       • 由于组件此时没有建立，因此没有this
       • 案例： 数据预载（进入组件前就得到数据）

       next(vm => { //vm指的就是组件
              const result = JSON.parse(res.data.slice(7,-1)).rp_result.categorys
              vm.$set(vm.category,'categorys',result)
            })

     • 组件内的后置守卫
       - 当好离开组件时，调用
       - this是能够访问到
     • 组件内的更新守卫（ 路由传参和路由的接参 ）
       • 在当前路由改变，可是该组件被复用时调用
       • 举例来讲，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
       • 因为会渲染一样的 Foo 组件，所以组件实例会被复用。而这个钩子就会在这个状况下被调用。
       • 能够访问组件实例 this
3. 功能： 导航守卫能够监听路由变化状况
4. 名词
   • 前置： 要进入当前路由 --- 老师进入教室前
   • 后置： 要离开当前路由 --- 老师离开教室
5. 关于next的使用
   • next() 等价于 next( true ) 表示能够从当前路由跳转到目标路由
   • next( false ) 表示不经过， 表示从当前路由跳转不到目标路由
   • next('/login') 等价于 next({path:'/login'}) 跳转指定的路由
   • next('/login') 等价于 next({path:'/login',params,query})
   • next( fn ) 数据预载
6. 业务： 当咱们进入到一个项目的首页时，可是当咱们没有注册帐号时，它主动跳转到了注册/登陆页

router.beforeEach((to,from,next)=>{
      const name = localStorage.getItem('name')
      if( name || to.path === '/login' ){
        //若是有   /  -->  /home
        next()
      }else{
        next('/login')
      }
  })

1. 业务： 当进入mine页面的时候， 要判断用户是否登陆，若是没有登陆，跳转登陆页

2. 路由导航守卫
   • 3中类型 7个路由监听钩子

• 业务：
  • 监听整个项目的路由变化状况 全局的前置守卫
  • 监听某个路由的变化状况 路由的独享守卫
  • 监听的路由组件的路由变化状况 组件内的导航守卫

1. 动效

2. 路由懒加载

   1. Vue异步组件 + Webpack