精华内容
下载资源
问答
  • 主要介绍了vue相同路由跳转强制刷新该路由组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • //点击跳转按钮 this.scrollTop() sessionStorage.setItem('foodDealId', tbId); this.$router.push({ path: "/foodDeal/info", query: { id: tbId } }) }, watch: { // 监听路由变化获取数据 '$...
    // methods
                scrollTop() {
                // 回到顶部
                    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                    var setI = setInterval(() => {
                        scrollTop = scrollTop - scrollTop / 10;
                        window.scrollTo(0, scrollTop);
                        // console.log(scrollTop);
                        if (scrollTop <= 1) {
                            clearInterval(setI)
                        }
                    }, 10);
                },
                pushInfo(tbId) {
                //点击跳转按钮
                    this.scrollTop()
                    sessionStorage.setItem('foodDealId', tbId);
                    this.$router.push({
                        path: "/foodDeal/info",
                        query: {
                            id: tbId
                        }
                    })
                },
    
            watch: {
            // 监听路由变化获取数据
                '$route.query.id': function(id) {
                    sessionStorage.setItem('foodDealId', id);
                    this.getServer()
                }
            },
    
    展开全文
  • 想必大家在平时开发的时候可能遇到这种需求,在打开该菜单页面的情况下,再次点击菜单需要刷新该组件(销毁再创建)。而vue自身如果路由不变的情况下是不会这样做的,那么只能使用一些骚操作了。 1.在菜单的路由...

    想必大家在平时开发的时候可能遇到这种需求,在打开该菜单页面的情况下,再次点击菜单需要刷新该组件(销毁再创建)。而vue自身如果路由不变的情况下是不会这样做的,那么只能使用一些骚操作了。

    1.在菜单的路由跳转上绑定一个随机query参数,例如时间戳或者随机数:

    this.$router.push({
        path:"/xxx",
        query:{
            t:Date.now(),
        },
    });

    该操作会触发路由改变,但是组件内的状态没有初始化,因为组件没有被重建。

    2.在路由容器上绑定key值:

    <router-view :key="$route.path + $route.query.t"></router-view>

    大功告成,通过key值的变化去强制刷新该组件。

    展开全文
  • 问题起因 最近做项目遇到了一个问题,如下图: 在menu中动态了生成了如上几条item,当我点击每条item,会拿到当前item的id,也就是歌单的id,去向后台...也就是往路由中添加路由userplaylist-detail,vue组件监测

    问题起因

    最近做项目遇到了一个问题,如下图:
    在这里插入图片描述
    在menu中动态生成了如上几条item,当我点击每条item,会拿到当前item的id,也就是歌单的id,去向后台请求对应id的歌单里面的数据,然后展示出来,展示组件的路由命名为userplaylist-detail。

    每次点击都会执行如下代码:

    this.$router.push({ name: "userplaylist-detail", query: { id } });
    

    也就是往路由中添加路由userplaylist-detail,vue的组件监测到路由发现变化,便会加载路由对应的组件展示出来,这里的问题是:第一次点击item的时候,可以显示歌单数据,当点击另一个item时,还是显示第一次点击的item的数据,虽然数据改变了,但是页面没有重新渲染。

    出现以上问题的原因是vue的一个特性:组件就地复用。因为上述几个item对应的路由都是一样的,组件监测到路由并没有发现改变,所以不会重新渲染页面。

    解决办法

    既然组件因为路由没有改变而不重新渲染,而我们又需要保持路由一致,那我们就收到刷新组件,这里使用v-if指令来刷新组件,通过依赖注入来解决刷新问题。

    在根组件(App.vue)中,写入如下代码:
    在这里插入图片描述
    我们通过属性isRouteActive来控制组件的渲染,然后在menu.vue组件中写入如下代码:
    在这里插入图片描述

    分析上述代码,其实关键就是子组件menu.vue调用了父组件App.vue提供的方法reloadRouterView,而reloadRouterView方法则负责改变isRouteActive的值来达到渲染组件的效果。

    上述代码中框住的部分有两个很关键的词,provide和inject,它们就是构成依赖注入的关键。其实依赖注入的作用就是实现父子组件之间的通信,让子组件可以调用父组件的方法来改变父组件的数据。

    依赖注入

    我理解的依赖注入就是:两个有依赖关系的双方,比如说父子组件,子组件依赖父组件,父组件通过provide提供子组件需要的属性或者方法,而子组件通过inject把父组件提供的属性或者方法注入到自身中,这样就能像使用自身属性或者方法一样使用父组件的属性或者方法。

    具体可以查看官方文档:https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E4%BE%9D%E8%B5%96%E6%B3%A8%E5%85%A5

    所以说,我们在开发中遇到的许许多多的问题都能在官方文档中找到答案,所以还是要多看看文档。

    展开全文
  • 最近写的这个项目,有很多下拉菜单,每个菜单会有相应的两种类型...所以想到了用key 去如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key,它会基于key的变...

    最近写的这个项目,有很多下拉菜单,每个菜单会有相应的两种类型。现在产品的需求是,跳转到不同的类型 需要页面重新渲染数据

    那么问题来了。

    我试了好几种方法,用watch监听路由去判断,但是发现输在input里面的值是不会被替换掉的

    所以想到了用key 去如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key,它会基于key的变化重新排列元素顺序,并且会移除key不存在的元素。

    因为工作性质,不能贴代码

    所以

    <router-view v-if="isRouterActive" :key="key"></router-view>

     

    data(){

      return isRouterActive:true,

      key:''

    }

    watch:{

       '$route'(to,from){

          this.isRouterActive = false;

          this.key = Math.random()*1000;

          this.$nextTick(()=>(this.isRouterActive = true))

      }

    }

    转载于:https://www.cnblogs.com/qingcui277/p/9600231.html

    展开全文
  • vue不同路由跳转同一组件,界面不刷新的问题 vue不同路由跳转同一组件,页面不刷新; 在router-view上配置一个动态的key即可,这里采用时间戳 <router-view :key="$route.query.t" /> this.$router.push({ ...
  • eg: Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接跳转时, 将不在执行 created,mounted 之类的钩子 1.需要在路由组件中, 添加 beforeRouteUpdate 钩子来执行相关方法拉...
  • 使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生。 项目结构: 一、配置 Router  用 vue-cli 创建的初始模板里面,并没有 ...
  • Vue 使用 vue-router 跳转页面

    万次阅读 2018-03-23 16:48:20
    使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生。 官方文档: https://router.vuejs.org/zh-cn/essentials/getting-started.html...
  • 有时候需要跳转同一个路由(或者复用同一组件),但是vue是不能实现同路由跳转的,但可以用其他方法实现需求,这里用作品页面案例举例。 需求 看图 实现 使用vue router的动态路由匹配,官方文档:动态路由匹配 ...
  • eg: Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接跳转时, 将不在执行 created,mounted 之类的钩子 需要在路由组件中, 添加 beforeRouteUpdate 钩子来执行相关方法拉...
  • 主要为大家详细介绍了Vue-Router来实现组件跳转的三种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 除过Vue特性外,其它API与GridManager API相同。 实现功能 功能 描述 宽度调整 表格的列宽度可进行拖拽式调整 位置更换 表格的列位置进行拖拽式调整 配置列 可通过配置对列进行显示隐藏转换 表头...
  • 之前没遇到过直接强制刷新组件的,都是通过ajax数据回来 重新请求更一下页面,面试题遇到了还是总结一下 一、 强制刷新 this.$router.go(0) this.$router.go( ) 如果未向该函数传参或delta相等于0,则该函数与...
  • vue route 路由跳转传递参数 使用 $router 方式 源组件: <template> <button @click="sendParams"> 跳转 </button> </template> <script> export default { methods:{ ...
  • 本文主要归纳在 Vuejs 学习过程中对于 Vuejs 组件的各个相关要点。由于本人水平有限,如文中出现错误请多多包涵并指正,感谢。组件使用细节name 属性在给子组件定义属性的时候,通常第一个属性就是 name 。例如下面...
  • 1,为相同路由跳转进行中间路由替换(全局守卫进行拦截,这种方法我没试) 2,使用v-if重新渲染当前页面组件,大体在data中设置一个boolean变量,然后定义一个reload方法,在方法中动态改变 boolean变...
  • 使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生。官方文档: https://router.vuejs.org/zh-cn/essentials/getting-started.html...
  • vue组件强制刷新

    2020-10-15 17:38:39
    vue相同的路由嵌套不同的iframe,因为同一个路由公用一个页面,这种情况其实我们的页面在第一次加载成功后就不会再加载了。页面iframe嵌套展示的是第一次加载的数据。其实这和页面的声明周期是相关的,这种情况出现的...
  • 每个文件夹中存在的组件在结构和工作方式上都相同。 这两个文件夹纯粹是作为如何最好地分离组件的指南。 数据成分 (Data components) Stored in src/views/ 存储在src/views/ Here are your routed components. ...
  • 七,组件通信 - 父组件向子组件传值 props选项高级选项配置 八,组件通信 -子组件向父组件传值 九,单向数据流 单向数据流子组件数据同步到父组件 十,非父子关系组件通信 十一,使用slot分发内容 一,什么...
  • <template> <div id="app"> <router-view :key="key" /> </div> </template> <script> export default { data() { return { }; }, mounted() { ... c...
  • Vue——组件的创建

    2020-02-16 16:02:06
    vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来。组件的使用更使我们的项目解耦合。更加符合vue的设计思想MVVM。 那接下来就跟我看一下如何在一个Vue实例中使用组件吧! 这里有一个Vue...
  • vue同级组件间传值

    2020-12-15 20:31:29
    2,在组件a中传出值 首先我们需要引入我们新创建的eventBus.js文件,通过$emit传值 <template> <div class="A" @click="gotoB()"> <h1>AAA</h1> <p>我是A中的a:【 {{ a }} 】<...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,692
精华内容 3,076
关键字:

vue相同组件跳转

vue 订阅