标签：strong 部分 同方 页面 rom his 规则 插入 活动
核心是 store，包含着应用中的大部分状态
Mutations 存放的是改变 state 的方法，更改store的状态的唯一方法是提交 mutation
Actions 存放的是一些业务逻辑，通常是异步任务。
安装
yarn add vuex
使用
import Vue from ‘vuex’ import Vuex from ‘vuex‘ Vue.use(Vuex)
==推荐使用辅助函数==
Vue在插入、更新或者删除时，提供多种不同方式的应用过渡效果
<transition enter-class="" enter-active-class="animated fadeInLeft" enter-to-class="" leave-class="" leave-active-class="animated fadeOutLeft" leave-to-class="" > <div class="tmp" v-if="isShow">div</div> </transition>
动画钩子函数
<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave=“afterLeave” v-on:leave-cancelled="leaveCancelled" > methods:{ ... enter:function(el,done){ done() // 表示完成动画 } }
安装
yarn add vue-router
使用
import VueRouter from ‘vue-router‘ Vue.use(VueRouter) new Vue({ el:"#app", router, render:h=>h(App) })
var routes =[ {path:‘/‘,component:ind}, {path:‘/msg‘,component:msg}, {path:‘/hi‘,component:hi} ]
界面
<div>
<router-link to="/">ind</router-link>
<router-link to="/msg">msg</router-link>
<router-link to="/hi">hi</router-link>
<router-view></router-view>
</div>
路由模式
#路由传参
{path:"/msg/:id/:msg",component:msg}
<router-link to="/msg/1/2">msg</router-link>
这样的传参通过this.$route.params.age获取
{path:"/msg",component:msg}
<router-link to="/msg?a=1&b=2">msg</router-link>
编程式导航
this.$router.push("/") this.$router.push({path:‘/msg‘,query:{a:1,b:2}})
这样的传参通过this.$route.query获取
| 声明式导航 | 编程式导航 | 说明 |
|---|---|---|
<router-link to="/"> |
this.$router.push(‘/‘) | 向history中添加记录 |
<router-link to="/" replace> |
this.$router.replace(‘/‘) | 不会向history中添加记录 |
| ———— | this.$router.go(1) | 历史记录中前进一页 |
params和query传参的区别，params 刷新页面，数据会丢失，解决办法是采用浏览器缓存（sessionStorage和localStorage）或者cookie将数据缓存下来。而query会把数据暴露在地址栏中， 类似get请求。
嵌套路由规则
{ path:"/list", component:List, children:[ {path:"/list/a",component:PageA}, {path:"/list/b",components:PageB} ] }
<keep-alive>是一个抽象组件，包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
props
include：字符串或正则表达式。只有名称匹配的组件会被缓存。exclude：字符串或正则表达式。任何名称匹配的组件都不会被缓存。max：最多可以缓存多少组件实例。keep-alive 提供了两个新的生命周期钩子函数
actived:keep-alive 组件激活时调用。deactived:keep-alive 组件停用时调用。可以添加拦截器，请求拦截器和响应拦截器。在里面可以做 toast 提示
标签：strong 部分 同方 页面 rom his 规则 插入 活动
原文地址：https://www.cnblogs.com/fdd-111/p/12029965.html
