前端学习笔记-vue2-路由

路由

概念

vue-router

vue的插件库，专门用来实现SPA应用

SPA

1. 单页Web应用
2. 整个应用只有一个完整的页面
3. 点击页面的导航链接不会刷新页面，只会做页面的局部刷新
4. 数据需要通过Ajax请求获取

路由概念

一个路由就是一组映射关系，key为路径，value可能是function或component

路由分类

1. 后端路由

   • 理解：value是function，用于处理客户端提交的请求
   • 工作过程：服务器收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

2. 前端路由

   • 理解：value是component，用于展示页面内容
   • 工作过程：当浏览器的路径改变时，对应的组件就会显示

基本路由

1.安装vue-router
2.应用插件
3.编写router配置项

import VueRouter form 'vue-router'
const router = new VueRouter({
  routes:[
    {
      path:'/...',
      component:??
    },
    ...
  ]
});
export default router

4.实现切换（active-class可配置激活后样式）

<router-link active-class="active" to="/...">???<router-link>

5.指定展示位置

<router-view><router-view>

注：

1. 路由组件通常放在pages文件夹，一般组件通常存放在components文件夹

2. 通过切换，隐藏了的路由组件，默认是被销毁的，需要的时候再进行挂载

3. 每个组件都有自己的$route属性，存储自身的路由信息

4. 整个应用只有一个router，通过$router属性获取

嵌套（多级）路由

1.配置路由规则，使用children配置项

import VueRouter form 'vue-router'
const router = new VueRouter({
  routes:[
    {
      path:'/?',
      component:?,
      children:[
        {
          path:'??',
          component:??
        }
      ]
    },
    ...
  ]
});
export default router

2.调整（需写完整路径）

<router-link active-class="active" to="/?/??">??<router-link>

路由传参

query参数

1.传递参数

<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link active-class="active" :to="/.../...?p=...&q=...&...">??<router-link>

<!-- 跳转并携带query参数，to的对象写法 -->
<router-link active-class="active" :to="{
  path:'/.../...'
  query:{
    p:...,
    q:...,
    ...
  }
}">
  ??
<router-link>

2.接收参数

$route.query.p
$route.query.q
...

params参数

1.配置路由，声明接收params参数

import VueRouter form 'vue-router'
export default  new VueRouter({
  routes:[
    {
      path:'/?',
      component:?,
      children:[
        {
          path:'??',
          component:??,
          children:[
            name:'--',
            path:'???/:p/:q',
            component:???
          ]
        }
      ]
    },
    ...
  ]
});

2.传递参数

<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link active-class="active" :to="/.../.../p/q">??<router-link>

<!-- 跳转并携带params参数，to的对象写法 -->
<router-link active-class="active" :to="{
  name:'--'
  params:{
    p:...,
    q:...,
    ...
  }
}">
  ??
<router-link>

注：路由携带params参数时，若使用to的对象写法，择不能使用path配置项，必须使用name配置项

2.接收参数

$route.params.p
$route.params.q
...

命名路由

简化路由的跳转

1.给路由命名

import VueRouter form 'vue-router'
export default new VueRouter({
  routes:[
    {
      path:'/?',
      component:?,
      children:[
        {
          name:'--'
          path:'??',
          component:??
        }
      ]
    },
    ...
  ]
});

2.简化跳转

<!-- 简化前，需写完整路径 -->
<router-link active-class="active" :to="/.../...?p=...&q=...&...">??<router-link>

<!-- 简化后，通过名字跳转 -->
<router-link active-class="active" :to="{
  name:'--'
  query:{
    p:...,
    q:...,
    ...
  }
}">
  ??
<router-link>

路由的props配置

让路由组件更方便地接收到参数

{
  name:'--',
  path:'??/:p/:q',
  component:??,
  <!-- 第一种，props为对象，该对象中所有的key-value最终通过props传给对应组件 -->
  props:{p:...,q:...}
   <!-- 第二种，props为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给对应组件 -->
  props:true
   <!-- 第三种，props为函数，该函数返回的对象中每一组key-value最终通过props传给对应组件 -->
  props(route){
    return{
      p:...,
      q:...
    }
  }
}

router-link的replace属性

1. 作用：控制路由跳转时操作浏览器历史记录的模式
2. 浏览器的历史记录有两种写入方式：
   • push 追加历史记录（路由跳转默认push）
   • replace 替换当前记录
3. 开启replace模式：<router-link replace …></router-link>

编程式路由导航

1.作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活
2.具体编码

this.$router.push({
  name:'--',
  params:{
    p:...,
    q:...
  }
})

this.$router.replace({
  name:'--',
  params:{
    p:...,
    q:...
  }
})

this.$router.forward()//前进
this.$router.back()//后退
this.$router.go(n)//n为正数，前进n步，n为负数，后退n步

缓存路由组件

1. 作用：让不展示的路由保持挂载，不被销毁
2. 具体编码

<!-- 缓存一个 -->
<keep-alive include="组件名">
  <router-view><router-view>
</keep-alive>
<!-- 缓存多个 -->
<keep-alive :include="['组件名1','组件名2',...]">
  <router-view><router-view>
</keep-alive>

路由组件独有的两个新的生命周期钩子

1. 作用：路由组件独有的两个钩子，用于捕获路由组件的激活状态
2. 具体名称
   • actived 路由组件被激活时触发
   • deactivated 路由组件失活时触发

路由守卫

1. 作用：对路由进行权限控制
2. 分类：全局守卫、独享守卫、组件内守卫

全局守卫

1.全局前置守卫：初始化时执行，每次路由切换前执行

router.beforeEach((to, form, next)=>{
  if(to.meta.isAuth){//判断当前路由是否参与权限控制
    if('权限控制规则'){
      next();//放行
    }
  }else{
    next();//放行
  }
})

2.全局后置守卫：初始化时执行，每次路由切换后执行

router.beforeEach((to, form)=>{
  if(to.meta.title){//判断当前路由是否参与权限控制
    doucument.title = to.meta.title
  }else{
    doucument.title = '--'
  }
})

独享守卫

只有前置守卫，没有后置守卫，可与全局后置守卫组合使用

beforeEnter((to, form, next)=>{
  if(to.meta.isAuth){//判断当前路由是否参与权限控制
    if('权限控制规则'){
      next();//放行
    }
  }else{
    next();//放行
  }
})

组件内守卫

• 进入守卫，通过路由规则，进入该组件时调用 beforeRouteEnter(to, from, next){}
• 离开守卫，通过路由规则，离开该组件时调用 beforeRouteLeave(to, from, next){}

路由器的两种工作模式

对一个url来说，#后的内容是hash值

hash值不会包含在HTTP请求中，即hash值不会带给服务器

hash模式

1. 地址中带#号，不美观
2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
3. 兼容性较好

history模式

1. 地址干净、美观
2. 兼容性和hash模式相比略差
3. 应用部署上线时需要后端人员支持，解决刷新页面服务器404的问题

更多前端学习笔记