vue.js 问题汇总

Vue UI:

一个可视化图形界面,方便你去创建、更新和管理项目的方方面面

router区别

在控制台打出this的时候，发现router同时存在
router为VueRouter实例，想要导航到不同URL，则使用$router.push方法（路由跳转）

vue路由的懒加载

按需加载，避免一次加载的内容过多，时间过长，出现长时间的白屏
用法：

1. router.config.js中引入路由组件 const List= resolve => require(['路由组件的路径'],resolve)
2. 文件打包时，路由组件被打包成不同的js文件，需要的时候引入
3. output.chunkFilename设置打包的路由组件js文件名（使用默认的id命名可以不用设置）
   
   

publicPath

1. 开发环境：

• 不配置，build.js文件打包到根目录下
• 配置，build.js文件打包到output.publicPath下
• 例：publicPath:'/hello', build.js文件打包到hello下

2. 生产环境：

• 不论配不配置，build.js文件打包到根目录下output.path下
• publicPath指向到output.path
• 备注：
  1）所有组件中，资源引入使用相对路径；
  2）html中引入资源，正常写；script中引入资源需用require
  
  

路由跳转

this.$router.push(参数)
参数：path+query或者name+params组合使用

为什么能直接用this.store？

vuerouter实例、vuex实例的store方法，都被挂在到了vue实例上，所以能直接用

vuex

1. import {mapGetters,mapActions} from 'vuex'
2. coumputed:mapGetters(['属性1','属性2']) methods:mapActions(['方法1','方法2'])
3. store属性设置

const actions={
    方法1({commit}){
        commit('方法1')
    }
}
const mutations={
    方法1(state){
        state.userHome=false
    }
}
const getters={
    属性1(state){
        return state.userHome
    }
}

5. 导出store且挂在到vue上