我们一般使用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. 11.scrapy框架持久化存储

    今日概要 基于终端指令的持久化存储 基于管道的持久化存储 今日详情 1.基于终端指令的持久化存储 保证爬虫文件的parse方法中有可迭代类型对象(通常为列表or字典)的返回,该返回值可以通过终端指令的 ...

  2. 【ZJOI2012】灾难

    [ZJOI2012]灾难 阿米巴是小强的好朋友. 阿米巴和小强在草原上捉蚂蚱.小强突然想,如果蚂蚱被他们捉灭绝了,那么吃蚂蚱的小鸟就会饿死,而捕食小鸟的猛禽也会跟着灭绝,从而引发一系列的生态灾难. 学 ...

  3. nginx + uwsgi 部署 Django+Vue项目

    nginx + uwsgi 部署 Django+Vue项目 windows 本地 DNS 解析 文件路径 C:\Windows\System32\drivers\etc 单机本地测试运行方式,调用dj ...

  4. mabatis insert into on duplicate key

    一.mabatis实现saveOrUpdate功能 <insert id="insert" parameterType="hystrixconfigdo" ...

  5. Linux之特殊符号与正则表达式

    Linux中常用的特殊符号 '' 所见即所得,吃啥吐啥 "" 特殊符号会被解析运行 `` ==== $() 先运行里面的命令 把结果留下 > 重定向符号 先清空文件的内容 然 ...

  6. Jmeter-csv文件参数化

    本文以登录的用户名和密码为例 1    创建csv文件 创建.csv文件,用户名和密码中间以逗号隔开 图 1 创建csv文件 2    在线程组中添加并配置CSV Data Set Config 添加 ...

  7. jenkins使用5----gi服务器搭建连接

    ♦安装git ♦服务器创建git用户 [root@localhost home]# id git id: git:无此用户 [root@localhost home]# useradd git [ro ...

  8. koa2中间件koa和koa-compose源码分析原理(一)

    koa是基于nodejs平台的下一代web开发框架,它是使用generator和promise,koa的中间件是一系列generator函数的对象.当对象被请求过来的时候,会依次经过各个中间件进行处理 ...

  9. Vue2.x源码学习笔记-Vue实例的属性和方法整理

    还是先从浏览器直观的感受下实例属性和方法. 实例属性: 对应解释如下: vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProx ...

  10. macOS10.4后的刻盘新姿势

    先sudo -s 输入密码 然后终端拖入createinstallmedia   (在macOS Mojave.app显示包内容里面的resources里面的文件复制下来即可) 输入 --volume ...