Vue单页SPA后台管理点击刷新当前页面
栏目: JavaScript · 发布时间: 5年前
内容简介: 使用vue都知道 SPA页面中跳转当前页面是不会有反应的,例如 在login页面使用需求: 点击左侧菜单的当前导航页面属性我们看一下Vue-router的文档
使用vue都知道 SPA页面中跳转当前页面是不会有反应的,例如 在login页面使用 this.$router.push('login')
,页面是不会出现任何现象的,push的路由也不会进入你是记录,那么我们如何实现在单页应用的刷新呢?
需求: 点击左侧菜单的当前导航页面属性
我们看一下Vue-router的文档
router.push() // 添加一个新的记录 router.replace() // 不会向 history 添加新记录 router.go(n) //向前或者后退多少步 复制代码
很显然没刷新当前页面的api,这个问题,已经有大佬进行了解决,就是 TagsView ,有兴趣的可以看看实现方法
参考的大佬的思路.在左侧菜单导航栏上面也实现了点击刷新当前页面
思路
很明显,单页应用不存在自己跳转到自己的api,所以我们需要借助中间页面进行跳转
- 创建一个中间页面
redirect
- 刷新自己不应该添加到浏览记录里面,所以使用
router.replace()
,并携带当前页面的路由路径 - 在中间页面的
created
函数中获取携带的参数路由路径,并进行再次router.replace()
完成当前页面的刷新
因为这里使用的 vue-admin-template ,所以需要对侧边栏进行一些修改
src\views\layout\components\Sidebar\SidebarItem.vue
<template> // .... <app-link :to="resolvePath(onlyOneChild.path)"> <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }" @click="reload(item)" // 添加点击方法 > <item :meta="Object.assign({}, item.meta, onlyOneChild.meta)" /> </el-menu-item> </app-link> </template> // .... </template> <script> export default { methods: { // ... // 点击重载 reload(item) { // 如果发现当前路由与点击的路由一致就携带路由路径跳转到redirect页面 if (this.$route.name === item.name) { this.$nextTick(() => { // params 默认会解析成为path字段,如果使用参数的形式 / 会来解析成为% this.$router.replace({ path: '/redirect' + this.$route.fullPath, }) }) } } }} </script> 复制代码
创建中转页面
src\views\redirect\index.vue
<script> export default { created() { console.log(this.$route); const { params, query } = this.$route const { path } = params this.$router.replace({ path: '/' + path, query }) }, render: function (h) { return h() // avoid warning message } } </script> 复制代码
配置路由
{ path: '/redirect', component: Layout, name: 'redirect', hidden: true, children: [ { path: '/redirect/:path*', // path为默认名称 通配符*必须存在 反之404 component: () => import('@/views/redirect/index') } ] } 复制代码
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- Swift iOS : 上拉刷新或者下拉刷新
- Swift iOS : 上拉刷新或者下拉刷新
- 优雅地刷新RecyclerView
- 上拉加载 下拉刷新
- jQuery ajax局部刷新
- vue项目刷新当前页
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Effective java 中文版(第2版)
Joshua Bloch / 俞黎敏 / 机械工业出版社 / 2009-1-1 / 52.00元
本书介绍了在Java编程中78条极具实用价值的经验规则,这些经验规则涵盖了大多数开发人员每天所面临的问题的解决方案。通过对Java平台设计专家所使用的技术的全面描述,揭示了应该做什么,不应该做什么才能产生清晰、健壮和高效的代码。 本书中的每条规则都以简短、独立的小文章形式出现,并通过例子代码加以进一步说明。本书内容全面,结构清晰,讲解详细。可作为技术人员的参考用书。一起来看看 《Effective java 中文版(第2版)》 这本书的介绍吧!