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

转载于:https://www.cnblogs.com/xxswkl-sn/p/10962325.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值