VueRouter复习果然不复习就跟没学习一样一样的

init

使用 node 初始化 vue 项目.
之后下载 node 依赖.

创建 vue 项目

参考vue官网. 之后的话需要添加依赖.
使用 node 安装. 这里推荐 10.x 版本. 之前我使用12.x 安装 vue依赖
一直失败. 换成 10.x 才好
并且安装 全局 vue 的时候 cmd 使用 管理员 安装

入口

App.vue 和 main.js 是一起的. 在 编译的时候,会将 App.vue 和main.js 编译到一起
将其中引入的其他资源进行解析

main.js

引入 vuex 和 VueRouter

Router

Router-Link & View

在 index.js 配置路由

使用 router-link 进行页面的直接显示

Link 和 View 配合显示
Link 显示组件. view 显示组件的内容

Router-push

类似 Link的跳转页面的方式.
在代码中使用 this.$router.push("path"); 即可跳转

axios

布局引入

在 每个 .vue 组件中 引入 axios

全局引入

在 main.js 中引入 axios

嵌套路由

在主路由显示的页面又是一个个的路由

再次点击子路由的话就可以显示真正 的内容了
在 index.js 路由配置 js 中配置子路由
在二级路由页面配置 要具体显示的页面


而 Home.vue 中 配置了 home1.vue

命名视图

对 router-view 进行命名
有时候想在页面同时显示多个 router-view . 可以对 组件进行命名.

<router-view name="a">
// 这里的 a 就是对路由进行了一个命名
// 在点击这个 router-link 的时候,可以显示不同的组件

Vuex

管理 整个页面各个组件的数据
组件间共享的数据存储到 vuex 中. 私有的存储到自己的data 中

使用

安装, 引入

state

由 state,mutations,actions,moudles 组成
各个部分是不同的功能

1. state: 公共数据区域. 可以存放各个组件的数据

访问 state

映射为计算属性
看上图

解构

使用 es6 语法将 vuex 中的各个属性解构出来

let {mapState} from 'vuex'
// 在将 state 中的属性转为 计算属性
...mapState(["count","msg"])

访问

mapMutations

vuex 中修改 state 中的数据
在 Mutations 中的方法一定会有一个入参: state

调用

解构

跟之前一样,解构为 mapMutitions

actions

异步方法定义在 actions 中.
action的方法会延时执行
在actions 中定义的方法需要传递参数

调用 mutitions 中方法

解构

let {mapState,mapMutitions,mapActions} from 'vuex'
... mapActions([""methodName])

调用actions 中方法

getters

相当于计算属性. 允许在这里把数据组装好.然后再去页面直接获取

使用

解构