当前位置: 首页 > news >正文

Vue2 VueRouter学习笔记

VueRouter

官方文档
版本对应
vue2:3.x.x
vue3:4.x.x

路由:访问路径与vue组件(页面)之间的映射关系
VueRouter:Vue官方提供的插件,本质上是一个 JavaScript 库,用于在 Vue.js 应用中实现路由功能

这里以vue2项目为例,版本3.6.5

1. 配置插件

VueRouter是一个第三方js库,类比axios,需要先下载,然后导入到项目中
下载:

npm install vue-router@3.6.5

导入:

import VueRouter from 'vue-router';

注册插件:把插件的功能添加到Vue构造函数中,给Vue实例对象添加了routerroute属性

Vue.use(VueRouter);

创建路由器实例:

const router = new VueRouter({routes: []
});

把路由器注入到Vue实例:给router属性赋值

new Vue({el: '#app',router, // 将路由器传递给 Vue 实例 router: routerrender: h => h(App)
});

2. 基本使用

vue组件可以当页面,也可以当标签组件,页面组件一般写在views目录下

下面我准备了3个页面
准备页面
注册路由

import FindMusic from './views/FindMusic.vue'
import MyInfo from './views/MyInfo.vue'
import MyFriends from './views//MyFriends.vue'...const router = new VueRouter({routes:[{ path: '/find', component: FindMusic },{ path: '/friend', component: MyFriends },{ path: '/me', component: MyInfo }]
})...

使用

<template><div id="app"><div class="nav"><a href="#/find">发现音乐</a><a href="#/friend">我的好友</a><a href="#/me"></a></div><div><router-view></router-view></div></div>
</template>

效果如下:
路由跳转

3. 项目开发

新建一个router目录用来存放router对象,用来专门维护路由
最后在main.js中导入这个对象就可以了
路由目录
修改代码,index.js内容如下:

import Vue from 'vue'
import VueRouter from 'vue-router'import FindMusic from '@/views/FindMusic.vue' // src目录 = @
import MyInfo from '@/views/MyInfo.vue'
import MyFriends from '@/views//MyFriends.vue'Vue.use(VueRouter)const router = new VueRouter({routes:[{ path: '/find', component: FindMusic },{ path: '/friend', component: MyFriends },{ path: '/me', component: MyInfo }]
})export default router

声明式导航

单纯使用a标签进行界面跳转,需要记住当前所在的路由页面以实现高亮效果
vue-router提供了一个全局组件 <router-link>取代a标签,本质上就是在a标签的基础上简化了代码

<router-link to="/find">发现音乐</router-link>
<router-link to="/friend">我的好友</router-link>
<router-link to="/me"></router-link>
  • 使用to代替href,可以不用写#号
  • 给当前路由页面对应的a标签自动添加了类:router-link-active,给该类添加样式实现高亮
    router-link-active只要界面在一级目录下,就可高亮,用的多
    router-link-exact-active界面必须在指定界面才高亮
    这两个类名可以自定义,上面的是默认值
    a.router-link-active {color: gold;}
    
    a标签高亮

跳转传参

本质上就是给目标组件对象传值。在注册路由的时候,相当于把route对象赋值给了目标组件的route属性了,你也可以通过给route对象设置属性传值

1 查询参数传参
传过去就是url传参的原理,to里面/path?参数名1=值1&参数名2=值2
拿值:在当前组件的route属性里拿,this.$route.query.参数名

演示:

<router-link to="/find?key=你好">发现音乐</router-link>

获得参数
实际效果

2 动态路由传参(适合单个参数)
路由:/path/:参数名 后面加个?表示参数非必须
to:/path/参数值
获取:this.$route.params.参数名

修改path
实际效果
重定向
redirect: 目标路径
重定向
当路由定位不到,找不到页面的时候可以配置404页面,但是必须在最后一个注册,path:'*'

跳转不出现#号
hash模式:基于a标签,带#号
history模式:不带#号,常用,h5新增,需要服务端支持
history模式

编程式导航

通过js代码实现页面跳转,可以通过触发事件实现跳转

可以这样理解(实际更复杂),router对象中维持了一个栈(先进后出)。如果需要跳转路由,相当于将一个route对象添加进栈

this.$router.push({ path: '/user', query: { id: 123 } });// 如果路由可以直接写路径或者route对象的name
this.$router.push('/user');

参数多的话写对象会更方便一点

类比分析
进栈:this.$router.push() 将新路由添加到浏览器的历史记录中,就像将一个新元素压入栈中。
出栈:this.$router.go(-1) this.$router.back() 会让浏览器回到上一个历史记录条目,就像从栈顶弹出元素。
栈顶:当前显示的路由相当于栈顶的元素,是最近的导航记录。

二级路由

注册组件时,route对象中children:[ ]实现嵌套路由

export default new Router({mode: 'history', // 使用历史模式以避免 URL 中的 hashroutes: [{path: '/parent',component: ParentComponent,children: [{path: 'child-a', // 注意这里不需要 /parent/ 的前缀component: ChildComponentA},{path: 'child-b',component: ChildComponentB}]}]
});

组件缓存

主要用途是在切换组件时,保持组件的状态和避免不必要的重新渲染,提高性能
使用<keep-alive>标签包裹着的组件,会自动实现组件缓存

直接用<keep-alive>包裹<router-view>会缓存所有下面的组件,需要控制缓存的行为

<keep-alive> 属性:

  • include: 仅缓存匹配的组件。可以传递一个字符串、正则表达式或数组。
  • exclude: 排除匹配的组件,不缓存它们。也可以传递字符串、正则表达式或数组。
  • max: 最大缓存组件数。当缓存的组件数超过这个值时,最久未使用的组件会被销毁。

底层:给需要缓存的组件生命周期中添加了两个钩子,disactivated() activated()

  • activated(): 恢复并可见时的调用(类似于 Android 的 onResume())。
  • deactivated(): 处理组件从视图中移除但仍在缓存中时的操作(类似于 Android 的 onPause())。
http://www.lryc.cn/news/436951.html

相关文章:

  • 3D培训大师,化工企业安全教育与应急演练的新助力
  • 斯坦福大学论文润色chat-gpt指令
  • 简单硬件在环搭建(ROS+Prescan+Carsim+simulink)
  • 【Python 数据分析学习】Pandas基础与应用(1)
  • pytorch入门(1)——pytorch加载数据初认识
  • Spring下载文件
  • 如何在数据库中备份表:操作指南与注意事项
  • 【数据结构】第八节:链式二叉树
  • Fair Graph RepresentationLearning via Diverse Mixture-of-Experts
  • 电机驱动开发之驱动板
  • STM32F1 HAL库笔记2_HAL 系统驱动程序
  • el-table实现当内容过多时,el-table显示滚动条,页面不显示滚动条
  • Java面试篇基础部分-Java中的异常以及异常处理
  • win11 MySQL的坑
  • stm32单片机个人学习笔记1(简单介绍)
  • python中@staticmethod、@classmethod用法
  • Harmony Next 文件命令操作(发送、读取、媒体文件查询)
  • Go语言中的链表与双向链表实现
  • 开始一个WPF项目时的记忆重载入
  • 用go语言实现树和哈希表算法
  • 基于SpringBoot+Vue+MySQL的校园健康驿站管理系统
  • 深入理解MATLAB中的事件处理机制
  • 线程--线程同步
  • 【QT】Qt窗口
  • 场外个股期权怎么给股票加杠杆?
  • 【Docker部署ELK】(7.15)
  • UE4_后期处理_后期处理材质及后期处理体积一
  • 【PyQt6 应用程序】基于QtDesigner做一个用户登录页面
  • Ollama—87.4k star 的开源大模型服务框架!!
  • MySQL表的操作与数据类型