vue项目中的一些问题

Posted ssunshine

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue项目中的一些问题相关的知识,希望对你有一定的参考价值。

1、切换路由时根路由一直处于被激活状态

  解决办法: 加exact属性  <router-link to="/home" exact>首页</router-link>

 如果需要进去首页默认选中home,需要配置路由重定向

{
      path: ‘/‘,
      redirect: ‘/home‘
}

2、改变了vuex里面的数据以后视图没有及时更新

  解决办法:如果这个数据是需要{{}}在行内渲染的,不要存储在data的一个变量中进行使用,应该这么写

<dt>{{this.$store.state.homedataStore.cityinfo.name}}·初中&nbsp;&nbsp;<i>基本数据</i></dt>

3、this指向的问题可以通过箭头函数来解决,比如

 myChart.on(‘click‘,(params)=>{
   // console.log(this.$store.homedataStore)
   if(params.data.name == ‘房山区‘ || params.data.name == ‘通州区‘){
      this.changecityinfo(params.data.name)
   }
})

 4、用watch监听数据,这个数据必须在data中声明

 5、使用keep-alive选择性的缓存页面数据,可以再router里面的index.js中添加属性

{
      path: ‘/e‘,
      name: ‘Edu‘,
      component: Edu,
      meta: {
        keepAlive: true // 需要被缓存
      }
    },
    {
      path: ‘/an‘,
      name: ‘An‘,
      component: A,
      meta: {
        keepAlive: true // 需要被缓存
      }
    },
    {
      path: ‘/test‘,
      name: ‘Phs‘,
      component: Ph,
      meta: {
        keepAlive: true // 需要被缓存
      }
    },
    {
      path: ‘/‘,
      redirect: ‘/home‘
    }

App.vue文件的写法如下:

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

注意 : 必须在路由的index.js文件中使用router

Vue.use(Router)

6、遍历数组最好使用for循环,尽量不要使用for...in

 

以上是关于vue项目中的一些问题的主要内容,如果未能解决你的问题,请参考以下文章

回归 | js实用代码片段的封装与总结(持续更新中...)

如何从 Android 中的 Fragment 访问 UI 元素?

vsCode写vue项目一键生成.vue模板

vue递归组件的一些理解

VSCode自定义代码片段1——vue主模板

VSCode自定义代码片段——.vue文件的模板