Vue——Router

65 阅读4分钟

叮咚:✨✨✨

提升自己,比仰望别人更有意义!!!
坚定自己的方向!去开拓打磨另一个自己!!!

此文章只是自己的理解!!!不喜勿喷!喜欢就给个赞哦!!!

希望各位互相监督,共同进步!共同致富!!!

VueRouter

一,路由简介

1,vue-router 的理解

vue的一个插件库,专门用来实现SPA单页面应用

(1)生活中的路由:

Snipaste_2023-03-15_09-15-10.png

(2)开发中的路由 ———— 单页面应用 SPA (single page web application)应用

Snipaste_2023-03-15_09-27-17.png

(3)对SPA应用的理解

 1 - 单页面web应用(single page web application )
 
 2 - 整个应用只有一个完整的页面index.html
 
 3 - `点击页面中的导航链接不会刷新页面, 只会做页面的局部刷新`
 
 4 - 数据需通过ajax请求获取
 
 
 

2,什么是路由?

一个路由就是一组映射关系key : value

key为路径, value 可能是function 或 component

3,路由分类

(1)后端路由

value 是 function ,用于处理客户端提交的请求

工作过程:服务器就收到一个请求时,根据请求路径找到匹配的函数来处理请求,返回响应数据

(2)前端路由

value 是 component , 用于展示页面内容

工作过程:当浏览器的路径发生改变时,对应的组件就会显示

二,路由基本使用

1,安装vue-router, 命令 npm i router

Snipaste_2023-03-13_10-45-55.png

2,应用插件: Vue.use(VueRouter)

3,编写router配置项

(1)引入VueRouter (router/index.js)

import VueRouter from 'vue-router

(2)引入组价

import XXX from '../XXX/XXX'

import XXX from '../XXX/XXX'

(3)创建router实例对象,去管理一组一组的路由规则

const router = new VueRouter({
 
 
     routes:[
   
       {
         path:'XXX',
         component:组件1
       },
       {
         path:'XXX',
         component:组件2
       }
  
  ]
 })

(4)暴露router

  export default router

4,在mian.js引入路由器,并挂载 到 vm身上

import router  from 'XXX'

new Vue ({
 
  el:'#app',
  
  render:h=>h(App),
  
  `router`
  
      })

5,实现切换(active-clss可配置高亮样式)

 <router-link class="list-group-item"  `active-class="active"`to="/home">Home</router-link>
 
 
 

6,指定路由页面展示位置用: <router-view> </router-view>

7,vue-router 的注意点:

(1)路由组件通常存放在pages 文件夹,一般组件通常存放在 components 文件夹。

(2)通过切换,隐藏了的路由组件,默认是被销毁的,需要的时候再去挂载

(3)每个组件都有自己的$route 属性,里面存储着自己的路由信息

(4)整个应用只有一个 router ,可以通过组件的$router 属性获取到

三,多级路由(二级路由)

Snipaste_2023-03-15_15-57-48.png

四,声明式导航 及 路由传参

1,query 方式携带参数(router-link + to)

to 字符串写法:

<router-link `:to="`/home/message/detail?id=${m.id}&title=${m.title}`"`>{{m.title}</router-link>

to 对象写法:

 <router-link  `:to="{
                   path:'/home/message/detail',
                   query:{
                      id:m.id,
                      title:m.title
                   } } " `> {{m.title}}</router-link>
                   

接收参数:

  $route.query.id 
  
  $route.query.title
                   
               
               

2,命名路由:顾名思义给路由起名字

Snipaste_2023-03-15_16-40-12.png

Snipaste_2023-03-15_16-40-47.png

3,params 式携带参数 (router-link + to)

to 字符串写法:

<router-link  `:to="`/home/message/detail/${m.id}/${m.title}`"`> {{m.title}}</router-link>



Snipaste_2023-03-15_16-58-24.png

to 对象写法:

<router-link  `:to="{
          name:'detail',
          params:{
            id:m.id,
            title:m.title
          }
        }`"> {{m.title}}</router-link>

Snipaste_2023-03-15_16-58-32.png

接收参数:

  $route.params.id 
  
  $route.params.title
  
  
  
  
  

五, 路由的 props 配置 ———— 让路由组件更加方便的接收参数

Snipaste_2023-03-15_17-15-08.png

六,router-link 的 replace 属性

Snipaste_2023-03-15_17-31-06.png

七,编程式导航

Snipaste_2023-03-16_10-17-15.png

八、缓存组件 keep - alive

Snipaste_2023-03-16_10-26-16.png

Snipaste_2023-03-16_10-28-11.png

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

作用: 路由组件所独有的两个钩子,用于捕获路由组件的激活状态

具体名字:

  activated  路由组件  被激活时触发
  
  deactivated 路由组件失活时被触发
  
  
  

十、路由守卫

1,全局 ———— 前置路由守卫 beforeEach

作用: 对路由进行权限的控制

分类: 全局守卫, 独享守卫, 组件内守卫

Snipaste_2023-03-16_15-14-53.png

2,全局 ———— 后置路由守卫 afterEach

Snipaste_2023-03-16_15-15-00.png

3,独享 路由守卫 —— 某一个路由所单独使用的路由守卫 beforeEnter

———— 可以搭配全局后置路由守卫一起使用。

Snipaste_2023-03-16_15-36-10.png

4,组件内路由守卫

beforeRouteEnter : 通过路由规则,进入该组件时被调用

beforeRouteLeave : 通过路由规则, 离开该组件时被调用

Snipaste_2023-03-16_15-49-59.png

十一、路由器工作的两种模式: history 模式 和 hash 模式

(1)对于一个url 来说,什么是hash 值?

  # 号后面的内容就是 hash

(2)hash 值不会包含在 HTTP 请求中, 所以 hash 值不会带给服务器

(3)hash 模式:

1- 地址中永远带着 # 号,不美观

2- 若以后将地址通过第三方手机APP分享,若APP校验严格则地址会被标记为不合法 

3- 兼容性较好

(4)history 模式:

1- 无#号 地址干净,美观 

2- 兼容性和hash 模式相比略差

3- 应用部署上线时需要后端人员支持,解决刷新页面服务端404问题