vue.js
Vuex
vuex是专门为vue应用程序开发的一个状态管理器，它集中式管理所有组件的状态。
-
state: 以对象的形式来储存全部应用层级的状态 -
mutation：更改vuex中state的唯一方法 -
action：不直接操作state，action用来提交mutation改变state的状态，可以包含异步操作 -
getter：相当于vue的computed计算属性
vuex使用场景
- 开店引导页(保存标识)
Vue-Router
vueRouter是vue官方提供的一个路由管理器，与vue高度集成，使得vue构建单页面应用极其简单。
<router-link><router-view><keep-alive>router.beforeEachrouter.afterEach- 路由守卫相关，以及应用场景
- 视图过渡
- 官方文档 :
https://router.vuejs.org/zh/
组件通信
-
props & $emit父子组件 $emit & $on 兄弟组件-
eventBus事件管理总线 -
vuex状态管理
Vue路由传值
-
:id, 动态匹配
// 定义
const router = new VueRouter({
routes:[
{
path:'/foo/:id',component:Foo}
}
]
})
// 访问
<p>{{$route.params.id}}</p>
-
:id动态匹配 开启props:true
// 定义
const router = new VueRouter({
routes:[
{
path:'/foo/:id', component:Foo ，props:true}
}
]
})
// 访问
props:['id']
<p>{{id}}</p>
-
:id动态匹配 ,props指定为一个对象
// 定义
const router = new VueRouter({
routes:[
{
path:'/foo/:id', component:Foo ，props:{ name:'long', age:20 }}
}
]
})
// 访问
props:['name','age']
<p>{{name}} --- {{age}}</p>
-
:id动态匹配 ,props指定为一个函数
// 定义
const router = new VueRouter({
routes:[
{
path:'/foo/:id', component:Foo ，props:route => (
{
name:"longer",
age:18,
id:route.params.id //访问路由匹配的id参数
}
)
}
]
})
// 访问
props:['name','age','id']
<p>{{name}} --- {{age}} --- {{id}}</p>
- 命名路由
const router = new VueRouter({
route:[
{path:'/user/:id', name:'user',props:true }
]
})
// 使用
<router-link :to="{name:'user',params:{id:123}}"></router-link>
// 或者使用router.push方法
router.params({name:'user',params:{id:123}})
