vue.js - vue 保持事件状态不工作

标签 vue.js

我在我的 vue 应用程序中使用 vue-router 尽管我设置了保持事件状态,但每次都会刷新内容页面 每次 i e 时都会调用已安装的钩子(Hook)和激活的钩子(Hook) 进入内容页 请原谅我糟糕的英语
提前致谢

//home.vue
    <div id="home">
        <topnav ref="childMethod"></topnav>
        <div class="mobile_header" ref="mobile_header"><img src="../assets/img/menu.png" @click="nav()"><p>earnest的小站</p></div>
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
        <div id="iconfont1" @click="gotop1()" v-show="show" title="回到顶部"></div>
        <myfooter></myfooter>
    </div>


 //app.vue
<div id="app">
        <!-- 不管写没写跟路由都在APP。vue里面?一定要加上这一句 -->
        <loading v-show="isloading"></loading>
            <router-view></router-view>
</div>

//路由器index.js

const router=new Router({
    mode:'history',
    routes: [
    {
        path: '/',
        redirect:'/content',
        component: home,
        children:[
      //注意这里有逗号
      // 要是hash路由,这里无论点那个路由都是跳转到content
      {path:'/about', name:'about', component:about,meta:{keepAlive:true}},
      {path:'/archives',name:'archives',component:archives,meta:{keepAlive:true}},
      {path:'/content',name:'content',component:content,meta:{keepAlive:true}},
      {path:'/article:_id',name:'article',component:article,meta:{keepAlive:true}}//这里的name是命名路由里面的参数name
      ]
  }

最佳答案

在 View 路由器上使用唯一 key

<keep-alive>
    <router-view v-if="$route.meta.keepAlive" :key="$route.fullPath"></router-view>
</keep-alive>

关于vue.js - vue 保持事件状态不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50019923/

相关文章:

vue.js - vuejs属性中的语法 `${k}`是什么?

php - Quasar Vue Socket.io Laravel-Echo 实现

vue.js - Vue.js 中的 $t 是什么

docker - 在docker-compose之前重新编译VueJS应用

javascript - 如何在Vue完全加载和初始化后才运行VueJS代码?

laravel - Vue SPA 网址在启用历史模式的情况下不起作用

javascript - 如何在 Vue.js 方法中使用外部 JavaScript 对象

javascript - 向下滚动到 Vuejs 组件上具有类名的元素

laravel - 当我部署到服务器时,Laravel 项目中的 vue 组件不会更新

twitter-bootstrap-3 - 在新选项卡中打开引导模式