1小时学会Vue之VueRouter&Vuex 趁着暑假掌握一门技能 大学生前端

推荐工具：

1、vue router

选择安装插件。。

···

history和hash模式：

• hash模式默认的，多一个#

• hash兼容性更好
• history模式，不带#，更好看

routes：组件路由

如何进行切换的操作：

也可以使用name方式：

【练习】下面自己写个组件配置到路由上：

1、新建vue：

2、在router上引入刚刚创建的vue：

3、配置路由

4、在根组件上通过rouer-link来使用

动态路由：

比如一个场景，视频组件根据id不同展示不同视频；

1、在router设置动态路由

如果希望在组件内部可以访问那个id，那就设置props为true；

组件内部通过props方式接受参数：

在根组件使用动态路由：

也可以通过name方式来写：

嵌套路由：

使用场景：针对具体的视频，视频组件内部也有视频的基本信息，或者是视频其他更加细分的子功能，比如点赞情况。

1、配置二级的路由子组件

2、创建相应的子组件

3、在ID的子组件页面下，把嵌套子组件写进来

编程式导航

场景：登录状态过期了，自动跳转到登录页。说白了就是个自动控制的过程，不用人为手动操作。

路由跳转时，传递参数

1、起始页面使用query传递：

2、在目的页面接受参数

导航守卫

可以给所有的导航做一个统一设置。

VUEX

五个功能：

1、存数据

声明之后，就可以在任意地方使用了。

2、全局中修改状态，使用mutation

mutation是指对数据进行修改的操作。在Vue中，mutation是指用来改变状态的函数，它必须是同步的，用来更新store中的状态。通过提交一个mutation来改变状态，可以在mutation中对数据进行操作，例如赋值、计算等。mutation是通过commit方法来触发的。

为了以后容易维护，只能在mutation上操作。

这里是state.属性，不同于vue其他地方，是this.属性

写好了方法，然后怎么执行呢？

总结：

• mutations需要通过commit来做提交
• mutations必须是同步的

actions是用来做异步包装

包一层。

这样使用：

异步的，在同步执行完后再执行。

getters：

定义：

访问：

多加几个：

打日志

只执行一回，因为有缓存性。

modules：

数据隔离。

怎么用呢？多包一层。

然后export

还要认真看看文档。

okay。