vue-router前端路由

1、vue-router安装： cnpm install vue-router –save

2、引入：import  VueRouter  from 'vue-router';

3、使用：Vue.use(VueRouter);

4、实例化：vue-router

5、router的基本配置：

6、在app.vue里设置路由渲染位置：<router-view></router-view>

在页面里实现跳转可以使用：<router-link :to="{path:'tab1'}"></router-link>

7、在组件模板里进行用to进行导航为声明式导航

    在js里可以使用编程式导航

8、命名视图

9、路由可以使用过渡动画

<transition name=“fade”>     

<router-view></router-view>

</transition>

也可以配合keep-live使用，切换过的视图就会缓存起来，不加会重新请求，消耗资源

<keep-alive>     

<router-view></router-view>

</keep-alive>

10、路由参数：

11、路由的嵌套：

12、路由懒加载

懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。

在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验， 运用懒加载可以将页面进行划分，按需加载页面，可以分担首页所承担的加载压力，减少加载用时。

如何使用：使用 AMD 风格的 require

13、Vuex状态管理

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

https://vuex.vuejs.org/zh-cn/intro.html

14、vuex安装：cnpm install vuex –save

vuex使用： import Vuex from "vuex";

Vue.use(Vuex);

const store=new Vuex.Store（{}）

15、

 

16、mutaions和actions的区别：

actions里面可以进行异步操作，比如Vuex里如果有ajax请求，只能写在actions里面，

mutations里面只能进行同步操作。

 

modules: 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。 为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）

 

转载于:https://my.oschina.net/u/3879716/blog/1826372