复
模块化vuex
配置 namespaced:true
computed: {
...mapState('Aboutcount', ['sum', 'school', 'subject']),
...mapState('Aboutperson',['personList']),
...mapGetters('Aboutcount',['bigSum'])
},
//简写methods里面的代码
methods: {
...mapMutations('Aboutcount',{ add: 'JIA', reduce: 'JIAN' }),
...mapActions('Aboutcount',{odd:'ji',wait:'deng'})
}
firstPersonName() {
return this.$store.getters['Aboutperson/firstPersonName']
}
this.$store.commit('Aboutperson/ADD', person)
路由简单案例
引入VueRouter 使用 传入router( router:router)
路由组件(pages文件夹) 一般组件 (components)
//创建路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
//创建路由器
export default new VueRouter({
routes: [
{
path: '/about',
component:About
},
{
path: '/home',
component:Home
}
]
})
路由组件一般放在pages文件夹
通过切换 隐藏的路由组件默认是被销毁的 需要的时候再去挂载
每个组件都有自己的$route 里面存自己的路由信息
一个应用只有一个router 通过$router获取
<!-- 原始html使用a标签实现页面跳转 -->
<!-- <a class="list-group-item active" href="./about.html">About</a>
<a class="list-group-item" href="./home.html">Home</a> -->
<!-- 借助router-link标签实现页面的实现 -->
<router-link class="list-group-item " active-class="active" to="/about">About</router-link>
<router-link class="list-group-item " active-class="active" to="/home">Home</router-link>
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<!-- 指定组件呈现位置 -->
<router-view></router-view>
路由嵌套 传参
配置规则(涉及二级 三级 路由)
export default new VueRouter({
routes: [
{
path: '/about',
component:About
},
{
path: '/home',
component: Home,
children: [
{ //二级路由路径不用写/
path: 'news',
component:News
},
{
path: 'message',
component: Message,
children: [
{ name:'xijie',//路由命名 简化路由跳转
path: 'detail',
// path:'detail/:id/:title', 携带params参数需要占位
component:Detail
}
]
}
]
}
]
})
<!-- 跳转路由携带query参数 to的字符串写法 -->
<!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{ m.title }}</router-link> -->
<!-- 跳转路由携带query参数 to的对象写法 -->
<router-link :to="{
// name:'xijie', //可以代替path 直接写成name来跳转
path: '/home/message/detail',
query: {
id: m.id,
title:m.title
}
}">
{{ m.title }}
</router-link>
<!-- 携带params参数 字符串写法 -->
<router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{ m.title }}</router-link>
在index.js中要进行占位
// path:'detail/:id/:title', 携带params参数需要占位
props配置
//props第一种写法 对象写法
// props: { a: 1, b: 'hello' } //给Detail传值
//第一种接收
// props: ['a', 'b'],
//props第二种写法 布尔值写法 布尔值为真 把组件收到的params参数以props参数传给Detail组件
// props: true,
接收
props: ['id', 'title']
//第三种 函数式 传的是query参数
props($route) {
return {id:$route.query.id,title:$route.query.title}
}