我们一般使用vue的router时候会根据不同的id来切换界面,但是界面没有立刻刷新。下面我们讲下如何解决这个问题。

html:

<template>
<div id="app">
<router-view :key="randomId"></router-view>
</div>
</template>

js:

export default {
computed: {
randomId () {
return this.$route.fullPath + new Date()
}
}
}

我们通过加个动态变化的参数,让界面可以触发钩子进行刷新

vue router 根据不同的id切换链接界面不刷新的更多相关文章

  1. [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  2. [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

    一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...

  3. 8. Vue - Router

    一.Vue Router 的使用 JavaScript: 1.创建组件:创建单页面应用需要渲染的组件 2.创建路由:创建VueRouter实例 3.映射路由:调用VueRouter实例的map方法 4 ...

  4. 「vue基础」一篇浅显易懂的 Vue 路由使用指南( Vue Router 上)

    大家好,今天的内容,我将和大家一起聊聊 Vue 路由相关的知识,如果你以前做过服务端相关的开发,那你一定会对程序的URL结构有所了解,我没记错的话也是路由映射的概念,需要进行配置. 其实前端这些框架的 ...

  5. vue router应用及总结

    编写一个小的demo,对router基础的应用学习和理解. 效果图示: 说明: 点击About在右边显示相关信息. 说明: 点击Home,在下边显示相关信息,且Home下有两个路由链接,分别对应各自的 ...

  6. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  7. Vue.js 2.x笔记:路由Vue Router(6)

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  8. Vue Router学习笔记

    前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...

  9. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

随机推荐

  1. ztree插件异步加载 使用RESTEasy报错 Only resource methods using @FormParam will work as expected. Resource methods consuming the request body by other means will not work as expected.

    在使用ztree插件实现异步加载时遇到后台RESTEasy接收参数问题,查看后台报错: A servlet request to the URI http://localhost:8080/area/ ...

  2. TCP三次握手四次挥手过程详解

    http://blog.csdn.net/imilli/article/details/50620104 TCP头部: 其中 ACK   SYN  序号  这三个部分在以下会用到,它们的介绍也在下面. ...

  3. 用惯图形界面的SVNer,如何突破Git----简单教程

    1.使用Git,首先安装好Git,它会赠送一个Git Bash给你 2.接下来,踩第一个坑----SSH连接,我们知道用Git关联本地仓库可以用SSH和HTTP两种方式,为什么不用HTTP,因为 不! ...

  4. 如何在excel单元格中插入图片批注

    在excel单元格中插入图片批注的方法: 1.选定要插入图片的单元格,然后右键选择插入批注. 2.然后会插入一个批注框,为了不影响图片效果,可以将批注文字都删除.然后鼠标移动到批注框边角再右键. 3. ...

  5. SICP 习题 (1.43)解题总结

    SICP 习题 1.43 是前面两道题的延续,习题要求我们定义一个过程(repeat f n) .当中f是一个单參数过程.题目要求我们通过repeat过程将过程f调用n次,注意是嵌套调用n次,不是连续 ...

  6. java 关于打断点

    比如:前台传过来参数中文乱码,需要decode才可以使用, 判断问题. debug 在 DispatcherServlet OncePerRequestFilter 打断点, 查看前台过来的中文在哪里 ...

  7. CMD命令行netsh添加防火墙规则

    1.为e:\f.exe 添加防火墙规则(参考:https://www.cnblogs.com/zhen656/p/4275270.html),需要管理员权限. >netsh advfirewal ...

  8. linux内存源码分析 - 零散知识点

    本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 直接内存回收中的等待队列 内存回收详解见linux内存源码分析 - 内存回收(整体流程),在直接内存回收过程中, ...

  9. linux驱动之中断处理过程汇编部分

    linux系统下驱动中,中断异常的处理过程,与裸机开发中断处理过程非常类似.通过简单的回顾裸机开发中断处理部分,来参考学习linux系统下中断处理流程. 一.ARM裸机开发中断处理过程 以S3C244 ...

  10. Spark运行模式:cluster与client

    When run SparkSubmit --class [mainClass], SparkSubmit will call a childMainClass which is 1. client ...