首页 > vue 如何做到不销毁组件?

vue 如何做到不销毁组件?

我在首页(index.html)上加了router-view ,然后把几个页面分为几个组件(一个个.vue文件),然后全部引入一个main.js上,通过这个文件写路由加载组件,但是我不想路由每次跳转后,前面访问过的页面的数据都消失了,这样又要重新获取。。但是我在router-view标签上加了 keep-alive并没有用啊,还是有其他什么要配置的吗?或者说有什么其他方法,可以做到数据不销毁,有没有类似angular的service?

上面是目录结构


  1. 写一个value.js

    let value = {

       id : 0, 
       name : ''

    }
    export default value;

  2. 在vue组件中使用

    import Value from './value'

    data : ()=>{

       return Value

    },

    组件销毁之后 数据还是在value中 下次进入时会自动读取


用vuex。页面数据保存在store的state里,store相当于全局变量,只要你浏览器不刷新,view之间的跳转是不会导致数据销毁的,除非你手动更新state中的数据。


可以选择使用奇技淫巧。
每次组件重新生成时使用的不是全新的对象字面量,而是对同一个对象的引用。
这个对象引用,可以用闭包变量_$v(或全局变量$v)来持存。

data:function(){return _$v;}

(或)

data:function(){return {v:_$v};}

例如:

<div>
    <v-v v-for="_ in s"></v-v>
    <input v-model="v.v">
    <button @click="++s">plus</button>
</div>
<script>
    (function(){
        var _$v={v:'v'};
        Vue.component('v-v',{
            template:'{{v}}<br>',
            data:function(){return _$v;}
        });
        new Vue({
            el:'div',
            data:{
                v:_$v,
                s:2
            }
        });
    })();
</script>

当然,这是开发Vue(x)思路,即利用原生JavaScript对象特性。
对于使用Vue(x),最合理的似乎就是大家所说的Vuex,人家会自动化代理这些的。
不过这样循序渐进,仍然有助于更好地理解、学习、进入和软着陆使用Vuex。


好了,基本都解决了.
1.数据的保存,参见上面的答案
2.安卓里,router-view出不来,原因:之前是绑定了html标签,就router.start()里面绑定的标签,然后我换成一个div,可以了,不知道为什么!


vuex可,vue的话就把重要的变量保存在全局vUE上吧

【热门文章】
【热门文章】