三、vue如何配置路由 、获取路由的参数、部分刷新页面、缓存页面

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中,页面会实现自动刷新,如下图所示:

时间: 2024-10-14 06:17:46

三、vue如何配置路由 、获取路由的参数、部分刷新页面、缓存页面的相关文章

vue路由获取路由参数

vue路由设置路由参数有2种方式: 1.通过query配置: <router-link :to="{ name:'login',query:{id:1} }">登录</router-link> 通过query配置的路径显示如下: 2.通过params配置: <router-link :to="{ name:'register',params:{'name':'San'} }">注册</router-link> 通过qu

vue 动态获取路由在对组件进行处理是报错,导致无法进入页面

vue 动态获取路由在对组件进行处理是报错,导致无法进入页面function filterAsyncRouter(asyncRouterMap) { //遍历后台传来的路由字符串,转换为组件对象const accessedRouters = asyncRouterMap.filter(route => { if (route.component) { if (route.component === 'Layout') {//Layout组件特殊处理 route.component = Layou

vue的生命周期和路由守卫

组件相关钩子函数: beforeCreate.created.beforeMount.mounted.beforeUpdate.updated.beforeDestroy.destoryed 还有两个特殊的(使用keep-alive):activated.deactivated(不详述) v2.5.0+新增: errorCaptured (暂时还不知道咋用) 路由守卫: 全局&路由独享:beforeEach.beforeResolve(v2.5.0+新增).afterEach :beforeEn

vue-router2.0动态路由获取参数

一下demo演示2.0中的vue-router是如何获取到不同参数的,并在地址栏中匹配不同的信息 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="vue.js&qu

Flask框架(二)—— 反向解析、配置信息、路由系统、模板、请求响应、闪现、请求扩展、session

目录 反向解析.配置信息.路由系统.模板.请求响应.闪现.session 一.反向解析 1.什么是反向解析 2.使用 二.配置信息 1.默认配置 2.修改方法一--点的方式修改 3.修改方法二--利用字典修改 4.修改方法三--通过py文件修改(常用) 5.修改方法四--利用类或类的路径修改(常用) 6.其他方法修改配置 三.路由系统 1.基本写法 2.转换器 3.路由本质 4.CBV 5.自定义支持正则 四.模板 五.请求与响应 六.session 七.闪现(flash) 1.使用 2.示例

Vue 嵌套路由、路由守卫

嵌套路由 嵌套路由:一个路由配置中嵌套其他的路由配置. 嵌套路由挺常用的,比如导航栏有首页.文章.想法.留言4个模块,我们以嵌套路由的形式集成这些模块,在导航栏中点击对应的条目,就会路由到对应的页面(下方显示对应的页面),和html的<iframe>效果差不多. demo   嵌套路由 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title><

AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式,获取路由参数,路由的Resolve

本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 刷新路由● 查看当前路由以及所有路由● 路由触发事件● 获取路由参数 ● 路由的resolve属性● 路由URL格式 项目文件结构 node_modules/ public/.....app/..........bower_components/...............toastr/....................toastr.min.css....................toastr.min

CCNA实验三十六 GRE(通用路由封装) &nbsp;

CCNA实验三十六 GRE(通用路由封装) 环境:Windows XP .Packet Tracert5.3 目的:了解GRE的使用,掌握如何配置GRE. 说明: GRE(Generic Routing Encapsulation,通用路由封装)协议是对某些网络层协议(如IP 和IPX)的数据报文进行封装,使这些被封装的数据报文能够在另一个网络层协议(如IP)中传输.GRE采用了Tunnel(隧道)技术,是VPN(Virtual Private Network)的第三层隧道协议. Tunnel

Vue.js 相关知识(路由)

1. 简介 路由,工作原理与路由器相似(路由器将网线总线的IP分发到每一台设备上),Vue中的路由根据用户在网页中的点击,将其引导到对应的页面. 2. 使用步骤 安装vue-router或者直接引入vue-router.js(下载地址:https://router.vuejs.org/) 例:SPA页面(Single Page Application,将一个网站的所有页面写在一个文件,通过不同的div进行区分,再通过div的显示.隐藏实现跳转效果) 定义组件对象(页面).组件模板.注册组件 定义