Vue-Route路由学习

Vue-R outer

  1. vue-router的理解：是vue的一个插件库，专门用来实现SPA应用。
  2. 对于SPA应用的理解
    • 单页Web应用（single page web application,SPA）
    • 整个应用只有一个完整的页面
    • 点击页面中的导航链接不会刷新界面，只会做页面的局部更新
    • 数据需要通过ajax获取
  3. 路由的理解
    • 什么是路由：
      • 一个路由就是一组映射关系：（key-value）
      • key为路径，value可能是function或component
  4. 路由分类：
    • 后端路由：
      • 理解：value是function，用于处理客户端提交的请求
      • 工作过程：服务器收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据
    • 前端路由：
      • 理解：value是component，用于展示页面内容
      • 工作过程：当浏览器的路径改变时，对应的组件就会显示
  5. 基本使用
    • 安装vue-router(vue2指定第三版本，vue3安装最新版本，第四版本)
      1
      npm install vue-router@3   //vue2指定安装第三版本
    • 在main.js中引入并使用
      1
      2
      3
      import Vue from 'vue'
      import VueRouter from 'vuerouter'
      Vue.use(VueRouter)
    • 编写route配置项目,router/index.js
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      //该文件专门用于创建整个应用的路由器
      import VueRouter from 'vue-router'

      //引入组件
      import About from '../components/myAbout.vue'
      import Home from '../components/myHome.vue'

      //创建一个路由器,并使用默认导出
      export default new VueRouter({
          routes: [{
                  path: "/about",
                  component: About
              },
              {
                  path: "/home",
                  component: Home
              }
          ]

      })
    • 实现切换（active-class可以配置高亮样式）
      1
      <router-link to="/about" active-class="active"><h1>About</h1></router-link>
    • 指定展示位置
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
                <router-view></router-view>
              ···
        6. 几个注意点：
            - 路由组件通常存放在`pages`文件夹，一般组件通常放在`components`文件夹
            - 通过切换，`隐藏`了的路由组件，默认是销毁了的需要的时候再去挂载。
            - 每个组件都有自己的`$route`属性，里面存储着自己的路由信息。
            - 整个应用只有一个router,可以通过组件的`$router`属性获取到

      ## 二、嵌套（多级）路由
        1. 多级路由
            - 配置路由规则，使用children配置项：
              ```javascript
               routes: [{
                   path: "/about",
                   component: About
               },
               {
                   path: "/home",
                   component: Home,
                   children: [{
                           path: 'news',
                           component: News
                       },
                       {
                           path: 'message',
                           component: Message
                       }
                   ]
                 }
              ]
    • 跳转需要写完整路径
      1
      <router-link to="/home/news">News</router-link>

      三、路由传参 query 和 params

  6. 路由的query参数
    • 传递参数 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
       <!-- 跳转并携带query参数，to的字符串写法 -->
      <router-link :to="`/home/message/detial?id=${item.id}&title=${item.title}`">跳转</   router-link>
      <!-- 跳转并携带query参数，to的对象写法 -->
      <router-link :to="{
        path:'/home/message/detail',
        query:{
          id:item.id,
          title:item.title
        }
      }"
      >跳转</router-link>
    • 接收参数
      1
      2
      this.$route.query.id
      this.$route.query.title
  7. 路由的params传参
    • 首先需要配置路由，声明接收params参数 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      routes: [{
          path: "/about",
          component: About
      },
      {
          path: "/home",
          component: Home,
          children: [{
                  path: 'news',
                  component: News
              },
              {
                  path: 'message/:id/:title',   //使用占位符声明接收params参数
                  component: Message
              }
          ]
        }
       ]
    • 传递参数
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      <!--路由并携带params参数，to的字符串写法-->
      <router-link :to="`/home/message/detial/${item.id}/${item.title}`">跳转</router-link>

      <!--路由并携带params参数，to的对象写法-->
       <router-link :to="{
         name:'Detial',
         params:{
           id:item.id,
           title:item.title
         }
       }"
       >跳转</router-link>
    • 特别注意：路由携带params参数时，若使用 to 的对象写法，则不能使用path配置项，必须使用name配置项。
    • 接收参数
      1
      2
      this.$route.params.id
      this.$route.params.title

四、命名路由

  1. 作用：可以简化路由跳转
  2. 命名路由的使用
    • 给路由命名：
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      {
         path: "/home",
         component: Home,
         children: [{
                 path: 'news',
                 component: News,
                 children:[
                   {
                     name:'Detial',  //给路由命名，每个路由都可命名·
                     path:'/detial',
                     component:Detial
                   }
                 ]
             },
             {
                 path: 'message',
                 component: Message
             }
         ]
       }
    • 简化跳转：
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      <!--简化前需要编写完整的路径-->
      <router-link to="/home/news/detial">简化前跳转</router-link>
       <!--简化后需要编写完整的路径-->
      <router-link :to="{name:'Detial'}">简化后跳转</router-link>

      <!-- 跳转并携带query参数，to的对象写法,加上使用命名路由 -->
       <router-link :to="{
         name:'Detial',
         query:{
           id:item.id,
           title:item.title
         }
       }"
       >跳转</router-link>
  3. 路由的props配置
    • 作用：让路由组件更加方便的接收参数
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
        {
          path: "/home",
          component: Home,
          children: [{
                  path: 'news',
                  component: News,
                  //props的第一种写法，值为对象，该对象中所有key-value都会以props的形式传给Detail组件
                   props:{a:1,b:'hello'}

                  //props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参 数，以props的形式传给detail组件
                   props: true

                  // props的第三种写法，值为函数
                  props($route) {
                      return { 
                          id: $route.query.id, 
                          title: $route.query.title 
                      }
                  }
              },
              {
                  path: 'message',
                  component: Message
              }
          ]
      }
  4. <router-link>的replace属性
    • 作用：控制路由跳转时操作浏览器历史记录的模式
    • 浏览器历史记录有两种方式：分别是push和replace。路由跳转的时候默认为true
      • push: 追加历史记录
      • replace: 替换当前记录。
    • 如何开启replace模式：<router-link replace ......>跳转</router-link>

五、编程式路由导航

  1. 作用：不借助<router-link>实现路由跳转，让路由跳转变得更加灵活
  2. 具体编码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
     //$router的两个api
     this.$router.push({
       name:'Messgae',
        params:{
          id:xxx,
          title:xxx
        }
     })
    this.$router.replace({
      name:'Message',
        params:{
          id:xxx,
          title:xxx
        }
    })
    //前进
      this.$router.forward()
    //后退
     this.$router.back()
    //控制前进后退的部属，参数为数字
    this.$router.go(-2)  //后退两步

六、缓存路由组件

  1. 作用：让不展示的路由保持挂载，不进行销毁。（可以保持页面用户输入数据不被清空）
  2. 具体编码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
     <!-- News为组件名，需要进行缓存的组件的组件名称 -->
    <keep-alive include="News">   
        <router-view></router-view> <!--路由展示区域-->
    </keep-alive>

    <!-- 缓存多个组件 -->
    <keep-alive :include="['News','Messages']">   
        <router-view></router-view> <!--路由展示区域-->
    </keep-alive>

    七、两个新的生命周期钩子

  3. 作用：路由组件独有的两个钩子，用于捕获路由组件的激活状态
  4. 具体名字与使用：
    • activated:路由组件被激活时触发。
    • deactivated:路由组件失活时触发。

八、路由守卫

  1. 路由守卫的作用：对路由进行权限的控制

  2. 分类：全局守卫，独享守卫，组件内守卫

  3. 全局前置——路由守卫

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    //全局前置路由守卫，初始化的时候被调用，每次路由切换之前被调用
    routere.beforeEach((to, from, next) => {
        console.log("路由切换", to, from)
            // if (to.path == '/home/news' || to.path === '/home/message')  原来的写法判断
        //使用meta自定义需要权限的页面
        if (to.meta.isAuth) {
            if (localStorage.getItem('school') == 'fanda') {
                next()
            } else {
                alert("现在位处于正常状态，返回主页")

            }
        } else {
            next()
        }
    })

  4. 全局后置——路由守卫 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    //全局后置路由守卫，初始化的时候被调用，每次路由切换之后被调用
    routere.afterEach((to, from) => {
        console.log("后置路由守卫", to, from)
        if (to.meta.title) {
            document.title = to.meta.title //如果路由中通过meta属性来添加自定义值标题，则给页签加上标题
        } else {
            document.title = "默认标题" //若没有则使用默认标题
        }
    })

  5. 独享路由守卫：为某一个路由所独享

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    {
     path: 'message',
     component: Message,
     meta: { isAuth: true, title: "消息" },  //meta自定义属性与值
     beforeEnter: (to, from, next) => {
         console.log("独立路由守", to, from)
         if (to.meta.isAuth) {
             if (localStorage.getItem('school') == 'fanda') {
                 next()
             } else {
                 alert("现在位处于正常状态，返回主页")
             }
         } else {
             next()
         }
     }
    }

  6. 组件内守卫

    • 进入守卫：通过路由规则，进入该组件时被调用
      1
      2
      3
      4
      beforeRouteEnter (to, from, next) {
       console.log('通过路由规则进入',to,from)
       next()
      },
    • 离开守卫：通过路由规则，离开该组件时被调用
      1
      2
      3
      4
      beforeRouteLeave (to, from, next) {
       console.log('通过路由规则离开',to,from)
        next()
      }

九、history模式和hash模式。两种工作模式

  1. 对于一个 url来说，hash值 为# 及其后面的内容
  2. hash值不好含在http的请求中，即：hash值不会带给服务器
  3. hash模式：
    • 地址中永远带着#号，不美观
    • 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
    • 兼容性好
  4. history模式
    • 地址干净，美观
    • 兼容性和hash模式相比略差
    • 应用部署上线时需要后端人员支持，解决刷新页面服务端404问题

十、Vue中的UI组件库

  1. 移动端的UI组件库

  2. PC端常用的UI组件库