我们一般使用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. Linux 小知识翻译 - 「NTP」

    这周聊聊「NTP」. 上次,聊了「时区」,也就是时间相关的话题. NTP是「Network Time Protocol」的简称,是为了将网络中计算机的时钟同步到正确时间的协议. PC内部的时钟是相当不 ...

  2. Docker: docker container常用命令实战

    容器管理,容器常用选项 选项 描述 -i, –interactive 交互式 -t, –tty 分配一个伪终端 -d, –detach 运行容器到后台 -e, –env 设置环境变量 -p, –pub ...

  3. JavaScript闭包理解【关键字:普通函数、变量访问作用域、闭包、解决获取元素标签索引】

        一.闭包(Closure)模糊概述 之前总觉得闭包(Closure)很抽象而且难理解,百度一下"闭包"名词,百度的解释是:“闭包是指可以包含自由(未绑定到特定对象)变量的代 ...

  4. Java面试知识点之设计模式(一)

    前言:关于设计模式,在框架中用的比较多.在平常接触最为频繁的估计是单例模式了,因此笔者在此对设计模式相关知识点进行总结. 1.设计模式的种类 总体来说,设计模式分为3大类总共23种: 1)创建型模式, ...

  5. 设计模式のFlyweight(享元模式)----结构模式

    一.产生背景 享元模式:它使用共享物件,用来尽可能减少内存使用量以及分享资讯给尽可能多的相似物件:它适合用于只是因重复而导致使用无法令人接受的大量内存的大量物件.通常物件中的部分状态是可以分享.常见做 ...

  6. Spring国际化模块

    1.Spring3.1.0实现原理分析(二).国际化(i18n) https://blog.csdn.net/roberts939299/article/details/69666291

  7. 局域网下Android与scoket通信的实现

    因为最近实验室项目要求实现在局域网下将android app数据发送到winsock中进行保存,所以对此进行了简单学习.pc端因为是另一个同学做的,所以不做说明. 在android端,首先添加权限: ...

  8. oracle 多版本

    并发控制 concurrency control 数据库提供的函数集合,允许多个人同时访问和修改数据. 锁(lock)是Oracle管理共享数据库资源并发访问并防止并发数据库事务之间“相互干涉”的核心 ...

  9. centos下安装 glances 的问题

    开始想安装htop 然后 yum installhtop 没有 yum searchhtop 也没有  然后上github 发现一个比htop还华丽的东西. Glances 大概这个样子的. 可以一览 ...

  10. [tool] AI视频翻译 解决英文视频字幕问题(类似youtube自动生成字幕)

    1.网易见外是网易人工智能事业部旗下的AI视频翻译产品. 字幕支持手工编辑和下载 不过网易见外 只支持WEB在线操作 并且只支持单个上传操作 目前没有客户端 2.人人译视界 (IOS 安卓 PC客户端 ...