学习vue制作移动端web
唯一改变vuex内容需要通过mutations
<router-view/>为配合router使用的容器,在其中展示div中的router-link等(未完全理解);
实现点击事件后页面跳转:绑定@click事件到方法,在方法中以this.router.push('/home')形式进行跳转;
v-model:数据双向绑定,例:<input type="text" v-model="title">,title为Vue中data的成员;
引入Vuex:<script>中import store from '@/store',再将store列为成员
//跨组件就要用到vuex
Home页面只显示两个router-link而没有显示list中的内容,最后破案:
没有在Home页面的ul标签下面加<router-view />
这个问题困扰了我很长时间!破案真开心!
1、要一步步寻找问题出处。2、哪个页面出的问题先仔细查看此页面代码。3、仔细查看与事例代码的差别。
使用Vuex保存状态的时候,由于是动态变化的,在页面引用的时候需要动态监听。
computed: {
pageLists (){
return store.state.lists
}
}
给vuex传递参数,可以在第二个参数上添加需要传递的参数
路由传递至首页
视频14:18,在路由里面的path: '/add'这个路由不知道是什么时候写上的,后面的user页面跳转到add页面也不知道什么时候写的,这是挖的坑麽?
新闻列表-查看详情页
新闻列表页-有内容
添加内容页
个人中心页
登陆后页面-新闻列表页
点击注册页面
实战页面1
配置router文件,需要先引入视图组件,然后在componet中调用
路由项中配置children:[]来配置子路由,二级路由
懒加载方式?
在视图组件中使用<router-link :to="{name:'name'}">标题</router-link>标签来进行路由部署
直接在methods中使用this.$router.push('/home/list')进行路由跳转
在store中使用vuex进行跨组件传递值,state中放入需要集中管理的值lists,在mutations中写入管理值的方法,方法的两个参数为state和value,方法中使用state.lists.push(value),将值push到state中,然后在发起内容变更的组件中使用store.commit('mutation',value),来将变化的数据value传递到组件数据管理中心的state中
在接收数据变化的组件页面使用store.state.lists来绑定值,使用computed进行监听
1,安装vue-cli插件
pash: '/'默认页面,首页