1.7

复

模块化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>&nbsp;&nbsp; -->

<!-- 跳转路由携带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>&nbsp;&nbsp;

在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}
     }