前端学习笔记-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的问题

更多前端学习笔记

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值