三、vue如何配置路由 、获取路由的参数、部分刷新页面、缓存页面
2024-10-19 06:28:10
1、路由配置:所有的启动文件都在最初始的main.js文件里面,这个文件中首先需要引入:
2、路由文件配置说明:
3、如何获取页面url的参数?
this.$route.query
4、页面之间之间的跳转?
5、返回历史记录页面
6、在项目中遇到的问题:
- 如何做到页面的部分刷新,如果做到部分页面进入的时候需要刷新,部分页面需要缓存?
首选需要了解keep-alive,在路由配置中增加如下代码:
{
"path": "/test",
"component": "test",
"name": "test",
"meta": {
keepAlive: true // 需要被缓存
}
}
然后在app.vue里面:
<div>
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
<!-- 这里是会被缓存的视图组件! -->
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
<!-- 这里是不被缓存的视图组件! -->
</router-view>
</div>
新的问题:
这样在相应的页面就可以做的自由缓存信息,但是现在又有一个问题:有的页面需要部分模块刷新,其他地方任然缓存信息,比如有编辑地址的页面,收件人信息需要点击编辑按钮进入编辑页面进行更改然后同步到此页面,而此页面的其他信息都保持页面缓存不变,如何做到这一点呢?
解决办法:
在需要部分刷新的页面,将需要刷新的数据写在activated中,页面会实现自动刷新,如下图所示:
最新文章
- myeclipse tomcat内存溢出解决方法
- Oracle没有WM_CONCAT函数的解决办法
- NSSet
- svn服务器搭建与使用
- 实例浅析epoll的水平触发和边缘触发,以及边缘触发为什么要使用非阻塞IO
- 应用SQLServer For XML 生成XML避免在C# 拼字符串
- Android之单复选框及Spinner实现二级联动
- SQL-PL/SQL基础
- Android进阶(五)在Eclipse中关联Gson源码
- windows下git库的ssh连接,使用public key的方法
- Python3:关于列表的操作(合并、拼接,嵌套排序&#183;&#183;)
- (5)Linux权限管理
- 学习笔记(二)--Lucene简介
- GDB最常用的命令
- MarkDown编辑器中缩进
- Echart示例
- AjaxAnywhere的用法(FORWARD)
- 01: 企业微信API开发前准备
- jvm(2)类的初始化(二)和实例化
- 安卓教程:提取APK程序里图片资源的方法
热门文章
- Android activity之间的跳转和数据传递
- Sequel-Model
- SpringMVC异常处理机制
- 玩转mongodb(二):mongodb基础知识
- SpringBoot入门 (一) HelloWorld
- redis实战笔记(2)-第2章 使用 Redis构建Web应用
- 关于js的 for...in 你了解多少
- ZBar之ZBarReaderViewController
- Wordpress性能优化:使用crontab+wp-cli代替wp-cron
- [转]UI-Grid HeaderCellClass