精华内容
下载资源
问答
  • vue返回上一页

    千次阅读 2017-08-10 15:05:30
    vue返回上一页



    代码: this.$router.back(-1);

    展开全文
  • VUE 返回上一页 不刷新页面

    万次阅读 多人点赞 2018-10-31 12:35:03
     方法(页面只刷新次,任何页面跳转到这个页面都不刷新) 直接在你的router-view 标签外面包个keep-alive 加include="组件名称" <keep-alive include="FileList"&g...

    网上有很多种方法,刚开始看的时候都感觉莫名奇妙。不知道他们说啥,理解能力有限,我梳理了一下。

    这里我介绍的主要是两种缓存某个页面的方法fang

     方法一(页面只刷新一次,任何页面跳转到这个页面都不刷新)

    直接在你的router-view  标签外面包一个keep-alive  加include="组件名称"
    
    <keep-alive  include="FileList">
         <router-view></router-view>
    </keep-alive>

    这时候匹配到的组件就会值加在一次。这个就比较简单,但能使用性不广。

     方法二(keep-alive与vue-router配合使用)

    配置路由的时候需要加  keepAlive: true  参数 (我把代码完整贴出来,有点长)

    import Vue from 'vue'
    import Router from 'vue-router'
    import Login from '@/components/Login/Login'
    import Regist from '@/components/Login/Regist'
    import P404 from '@/components/404/404'
    import Loading from '@/components/404/Loading'
    import Main from '@/components/Main'
    import User from '@/components/Basic/User' //用户
    import Role from '@/components/Basic/Role' //角色
    import Department from '@/components/Basic/Department'  //部门
    import RPermissions from '@/components/Basic/RPermissions'  //角色权限设置
    import DPermissions from '@/components/Basic/DPermissions'  //部门权限设置
    import RoleList from '@/components/Basic/RoleList'  //角色成员列表
    import DeparmentList from '@/components/Basic/DeparmentList'  //部门成员列表
    import LogLogin from '@/components/Basic/LogLogin'  //登录日志
    import LogOperation from '@/components/Basic/LogOperation'  //操作日志
    import LogFile from '@/components/Basic/LogFile'  //文件日志
    import Class from '@/components/Basic/Class'  //文件日志
    import SetFile from '@/components/Basic/SetFile'  //文件上传
    import FileAudit from '@/components/Basic/FileAudit'  //文件审核
    import FileList from '@/components/Basic/FileList'  //文件列表
    import FileView from '@/components/Basic/FileView'  //文件预览
    
    Vue.use(Router)
    
    export default new Router({
      mode: 'hash',//history
      routes: [
        {
          path: '/login',//登录页
          name: 'Login',
          component: Login
        },
        {
          path: '/regist',//注册页
          name: 'Regist',
          component: Regist
        },
        {
          path: '/',//首页
          name: 'Main',
          component: Main,
          redirect: '/Loading',//默认子路由
          meta: {
            requireAuth: true,  // 添加该字段,表示进入这个路由是需要登录的
            keepAlive: false, //此组件不需要被缓存
          },
          children: [
            {
              path: 'user',//用户管理
              component: User,
              meta: {
                requireAuth: true,
                keepAlive: false, //此组件不需要被缓存
              },
            },
            {
              path: 'role',//角色管理
              component: Role,
              meta: {
                requireAuth: true,
                keepAlive: false, //此组件不需要被缓存
              },
            },
            {
              path: 'department',//部门
              component: Department,
              meta: {
                requireAuth: true,
                keepAlive: false, //此组件不需要被缓存
              },
            },
            {
              path: 'rpermissions',//角色权限设置
              component: RPermissions,
              meta: {
                requireAuth: true,
                keepAlive: false, //此组件不需要被缓存
              },
            },
            {
              path: 'dpermissions',//部门权限设置
              component: DPermissions,
              meta: {
                requireAuth: true,
                keepAlive: false, //此组件不需要被缓存
              },
            },
            {
              path: 'rolelist',//角色成员列表
              component: RoleList,
              meta: {
                requireAuth: true,
              },
            },
            {
              path: 'deparmentList',//部门成员列表
              component: DeparmentList,
              meta: {
                requireAuth: true,
                keepAlive: false, //此组件不需要被缓存
              },
            },
            {
              path: 'loglogin',//登录日志
              component: LogLogin,
              meta: {
                requireAuth: true,
                keepAlive: false, //此组件不需要被缓存
              },
            },
            {
              path: 'logoperation',//操作日志
              component: LogOperation,
              meta: {
                requireAuth: true,
                keepAlive: false, //此组件不需要被缓存
              },
            },
            {
              path: 'logfile',//文件日志
              component: LogFile,
              meta: {
                requireAuth: true,
                keepAlive: false, //此组件不需要被缓存
              },
            },
            {
              path: 'class',//文件分类
              component: Class,
              meta: {
                requireAuth: true,
                keepAlive: false, //此组件不需要被缓存
              },
            },
            {
              path: 'setfile',//文件上传
              component: SetFile,
              meta: {
                requireAuth: true,
                keepAlive: false, //此组件不需要被缓存
              },
            },
            {
              path: 'fileaudit',//文件审核
              component: FileAudit,
              meta: {
                requireAuth: true,
                keepAlive: false, //此组件不需要被缓存
              },
            },
            {
              path: 'filelist',//文件列表
              component: FileList,
              meta: {
                requireAuth: true,
                keepAlive: true, // 此组件需要被缓存
              },
            },
            {
              path: 'fileview',//文件预览
              component: FileView,
              meta: {
                requireAuth: true,
                keepAlive: false, //此组件不需要被缓存
              },
            },
            {
              path: 'Loading',//等待页面
              component: Loading,
              meta: {
                requireAuth: true,
                keepAlive: false, //此组件不需要被缓存
              },
            }
          ]
        },
        { path: '*', component: P404 }
      ]
    })
    
    
    

     配置入口文件

            <keep-alive>
              <router-view v-if="$route.meta.keepAlive">
                <!-- 这里是会被缓存的视图组件,比如 Home! -->
              </router-view>
            </keep-alive>
    
            <router-view v-if="!$route.meta.keepAlive"></router-view>
              <!-- 这里是不被缓存的视图组件,比如 Edit! -->

    之后在 router.beforeEach  方法里面来动态修改 keepAlive  的值 (我的是这个代码是放在main.js里面的,这个就随你高兴了)

    router.beforeEach((to, from, next) => {
      iView.LoadingBar.start();//loadong 效果
    
      //进入登录页面的时候清除 token
      if(to.path === '/login' ){
        sessionStorage.removeItem("token", '');
        sessionStorage.removeItem("user_Data", '');
      }
    
    
      store.state.token = sessionStorage.getItem('token');//获取本地存储的token
    
      if (to.meta.requireAuth) {  // 判断该路由是否需要登录权限
        if (store.state.token !== "" && store.state.token !== null) {  // 通过vuex state获取当前的token是否存在
    
          //判断是否需要缓存
          if(to.path === '/filelist' && from.path === '/fileview'){
            to.meta.keepAlive = true;  // 让 列表页 缓存,即不刷新
            next();
          }else {
            to.meta.keepAlive = false;  // 让 列表页 即不缓存,刷新
            next();
          }
    
        }else {
          next({
            path: '/login',
            query: {redirect: from.fullPath}  // 将跳转的路由path作为参数,登录成功后跳转到该路由
          })
        }
    
      }else {
        next();
      }
    })

     我这里只判断  to.path === '/filelist' && from.path === '/fileview' (翻译从文一下这个代码,本路径是fileview,要跳转的路径是filelist,也就是从fileviewlu路径跳转到filelist,不刷新filelist页面)表页的时候缓存,外面的那些token什么的不知道的话,请看我的以前一篇博客传送门

    这里我们就可以愉快的使用之前缓存是数据了。

     

    展开全文
  • vue 返回上一页 带参数

    千次阅读 2020-04-01 22:30:50
    返回上一页用的是 this.$router.go(-1) 那么只能在返回之前将参数放在localStorage里面 localStorage.setItem('searchKeyword',this.keyword) 返回上一页面之后,拿到数据,再清空localStorage let ...

    返回上一页用的是

    this.$router.go(-1)

    那么只能在返回之前将参数放在localStorage里面

    localStorage.setItem('searchKeyword', this.keyword)

    返回上一页面之后,拿到数据,再清空localStorage

     let searchKeyword = localStorage.getItem('searchKeyword')
    
     localStorage.setItem('searchKeyword', '')

     

    展开全文
  • vue 返回上一页,页面样式错乱

    千次阅读 2019-01-06 17:29:01
    vue项目,返回上一个,页面样式错乱,就是页面之间的样式干扰了,虽然vue 是单页面开发,但是如果不注意样式并不是说写在哪个页面就是哪个页面的样式,想要页面样式不冲突,一定要在最外面添加class或者id用来区分...

    vue项目,返回上一个,页面样式错乱,就是页面之间的样式干扰了,虽然vue 是单页面开发,但是如果不注意样式并不是说写在哪个页面上就是哪个页面的样式,想要页面样式不冲突,一定要在最外面添加class或者id用来区分

    展开全文
  • vue返回上一页面时不刷新

    千次阅读 2019-12-10 20:03:59
    在日常使用的时候,我们经常需要返回上一级页面的时候,不刷新页面,保持页面不变,这里就需要使用以下方法: 思路: 因为vue是单页面应用,进入其他页面时会销毁该页面,用keep-alive不让其刷新,具体实现为: (1)....
  • methods: { back(){ if (window.history.length <= 1) { this.KaTeX parse error: Expected 'EOF', got '}' at position 66: …se }̲ else { …router.go(-1) } } }, 转载自:https://www.cnblogs.c...
  • vue返回上一页面时回到原先滚动的位置

    万次阅读 热门讨论 2018-12-18 11:45:18
    项目结束,测试时发现在首页商品列表中,向上滑动几后点击进入详情,从详情页面返回商品列表时,页面回到了最顶部,测试不通过说是用户体验不好,要求从哪里点击进去返回该页面时回到原先的滚动页面。 思路:因为...
  • 因为vue是单页面应用,进入其他页面时会销毁该页面,用keep-alive不让其刷新,具体实现为: 1. 在App.vue中加入: <template> <div id="app">...--页面返回不刷新--> <keep-alive> &l...
  • vue返回上一页go()和back()

    千次阅读 2020-01-07 16:55:31
    history.back(-1):直接返回当前页的上一页,数据全部消息,是个新页面 history.go(-1):也是返回当前页的上一页,不过表单里的数据全部还在 history.back(0) 刷新 history.back(1) 前进 history.back(-1) 后退 ...
  • Vue】------- Vue 实现返回上一页

    千次阅读 2018-07-29 15:32:18
    1. 怎么用vue返回上一页呢 !看如下代码示例: <div class="caozuo-heander"> <div> <i class="icon iconfont icon-return " @click="go"></i></div> <div> <...
  • vue如何返回上一页效果

    万次阅读 2019-03-15 17:06:31
    如何通过点击的方式控制当前页返回一个路由页面: 1.在当前页面添加返回按钮 &lt;div style="text-align: center"...2.在方法体内写back方法实现点击返回上一页操作 met...
  • vue路由返回上一页操作

    千次阅读 2020-02-18 13:45:48
    有些时候我们从其他的页面跳转到登录页面我们登陆之后然后想调回原来的页面就是使用vue的路由返回的操作 this.$router.go(-1) //返回上级操作 ...或者直接在返回方法写 @click="$router.go(-1)" ...
  • Vue怎么返回上一级,返回上一页面

    千次阅读 2018-11-15 09:53:19
    返回上一级&lt;/button&gt; &lt;script&gt; methods:{ prev(){ this.$router.go(-1) } } &lt;/script&gt; 注:后退:this.router.go(−1),反之前进就是this.router...
  • vue 左滑返回上一页

    千次阅读 2018-07-30 23:40:35
    插件:vue-directive-touch 步骤: 1.安装依赖 npm install vue-directive-touch --save; 2.main.is import touch from 'vue-directive-touch'; Vue.use(touch); 3.app.vue &amp;lt;...
  • vue2.0返回上一页

    万次阅读 2017-09-12 21:55:22
    vue版本为2.0+且使用了Vue-router @click="$router.back(-1)"
  • vue 如何点击按钮返回上一页

    千次阅读 2020-01-13 17:12:14
    1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 第一种只返回上一页 goOff(){ this.$router.go(-1); }, ...
  • vue实现刷新当前页和返回上一页

    千次阅读 2019-11-15 15:38:03
    返回上一页很简单,只需要加上@click="$router.back()"即可。 刷新当前页,首先在app.vue的加上v-if属性 <router-view v-if="isRouterAlive"></router-view> 在data里面加上isRouterAlive,当然这...
  • Vue实现点击返回上一个页面

    千次阅读 2020-05-13 20:42:46
    通常在Vue当中,写电商案例,有时候需要返回上一个页面,在这里我用的方式就是直接回到你写的个页面 1、通过:this.$router.go(-1) 2、通过:this.$router.back()
  • Vue返回,跳转上一页命令

    千次阅读 2019-05-08 23:22:31
    返回上一页 this.$router.go(-1) 返回上一页,否则跳转指定页面 if (window.history.length <= 1) { this.$router.push({path:'/'}) return false } else { this.$rou...
  • Vue移动端右滑屏幕返回上一页

    千次阅读 2020-02-23 02:40:24
    Vue移动端右滑屏幕返回上一页 2019年06月25日 20:43helloweba.net 作者:月光光 标签:Vue.js JavaScript 有些时候我们玩手机更喜欢使用手势滑动带来的用户操作体验。Vue touch directive是一个用于移动设备操作指令...
  • vue 返回上一

    千次阅读 2018-09-18 10:59:15
    种方法,在页面中这样写 <div @click="$router.go(-1)"></div> 第二种方法,写事件 <div @click="back">返回</div> <div @click="close">关闭当前页面,返回目标文件</...
  • vue中实现点击返回上一页

    千次阅读 2018-12-18 20:18:03
    vue中实现点击返回上一页 &lt;template&gt; &lt;el-button @click="prev()"&gt;返回&lt;/el-button&gt; &lt;/template&gt; &lt;script&gt; export default { ...
  • 从列表页面进入详情页面,然后点击返回的时候,我们的接口会重新调用,页面也会跑到顶部,这样用户体验是很不好的,每次用户都得从往下从新翻,下面就给大家介绍如何解决这种问题; Vue 提供的方法 当创建个 ...
  • 对于该问题我们在要进入的页面监听路由的变化 // 比如要对type重新赋值请求,就得在监听路由的方法getpage里面进行赋值 data(){ return{ type:"" } } created(){ ... '$route':"getpage" //需要处理数据的方法 ...
  • vue浏览器历史记录返回上一页问题

    千次阅读 2019-07-22 10:42:27
    1.引入 npm install vue-prevent-browser-back ...2.在需要返回的页面引用并注入 import preventBack from 'vue-prevent-browser-back';//组件内单独引入 export default { mixins: [preventBack],//注入 } ...
  • vue router-link 返回上一页

    千次阅读 2019-12-24 10:02:12
    1、如果使用了Vue-router的话,就可以用 this.$router.go(-1) 实现返回; 2、如果没使用vue-router,就可以用 window.history.go(-1) 实现返回效果。 可以 定义方法@click="goback" ethods:{ go...
  • vue 页面回跳两个界面(返回上一页两次) this.$router.go(-2);
  • vue获取上一个页面路由

    万次阅读 2018-12-06 18:20:25
    在某种情况下,我们要获取上一个页面的路由地址 可以使用: vue-router的beforeRouterEnter钩子 其实也就是个路由守卫 beforeRouteEnter(to, from, next) { next(vm=&gt;{ // 这里的vm指的就是vue实例,可以...
  • 移动端vue项目中,页面路由跳转情况(app内镶嵌的个h5页面):A(入口)—–B(个商品的介绍)—–C(购买该商品创建的订单)—-D(准备去支付的页面); 因为从C进入D页面时已经形成订单id,当在点击返回...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 238,821
精华内容 95,528
关键字:

vue怎么返回上一页

vue 订阅