Vue（10）

import vuex from "vuex"
import Vue from "vue"
import userDate from "./zth/index.js"
Vue.use(vuex);
const store = new vuex.Store({
    // 存储数据的地方
    state:{
        sum:0,
    },
    // 操作state数据
    mutations:{
        funSum(state,value){
            // console.log(state);
            // console.log("------------------");
            // console.log(value);
            state.sum += value
        }
    },
    // 处理异步，可以对mutation中间件操作
    actions:{
        mySum(context,value){
            setTimeout(()=>{
                context.commit("funSum",value)
            },2000)
        }
    },
    // 用于加工state的值，相当于全局计算属性
    getters:{
        getSum(state){
            return state.sum+100;
        }
    },
    // 存放模块
    modules:{
        userDate
    }
})
export default store

import VueRouter from "vue-router"
import Vue from "vue"
import LoginUser from "@/views/login.vue"
import HomePage from "@/views/home.vue"

Vue.use(VueRouter);
const router = new VueRouter({
    // 路由配置的集合
    routes:[
        {
            path:"/",
            // redirect重定向
            redirect:"/login"
            component:LoginUser
        },
        {
             // 访问的名称
             path:"/login",
             // 文件的路径
             component:LoginUser
       },
        {
            path:"/home",
            component:HomePage
        }
    ]
})
export default router

作用：实现切换页面，相当于a标签

<router-link active-class="active" to="/home">登录</router-link>

// 导入区
import VueRouter from "vue-router"
import Vue from "vue"
import LoginUser from "@/views/login.vue"
import HomePage from "@/views/home.vue"
import page1 from '@/views/page1.vue'
import page2 from '@/views/page2.vue'
Vue.use(VueRouter);
// routes区----配置路由区
 let routes=[
    {
        // path："/home"
        // 记得使用/home/:id/:title
        path:"/",//路由查询路径
        component:HomePage,//组件的来源
        name:"home",//可以使用name属性代替path属性进行查询
        meta:{
            title: "用户列表",breadcrumb: "用户管理"
        },
        // redirect重定向
        // redirect:"/home",
        children:[
            { path: "/home", name: "home", component: HomePage,
            // redirect:"/page1",
            children:[
                { path: "/page1", name: "page1", component:  page1},
                { path: "/page2", name: "page2", component:  page2}
            ]
        },
        ] 
        //提供元数据
         // 第一种 对象形式 props接收参数       
        // props:{
        //     id: '888',
        //     title: '你好啊'
        // },   
        // 第二种方式 1.
        // 接收参数 props
        // 使用params 只能使用name作为标识
        // 使用query 可以使用name和path作为标识
        // 方式的区别：params直接写在路径上面 query send({id:123})
        // params 请求头 query请求体
        // params query
        // props: false,  
        // 第三种 ，函数式
        // props($route) {
        //     console.log("rooot",$route);
        //     return {
        //         id: $route.params.id,
        //         title: $route.params.title,
        //         // 还可以返回一些别的数据
        //         // a: 1,
        //         // b: "hello"
        //     }
        // },
        // alias:'/qwe',// 为当前路由提供一个或多个别名，访问别名时会展示与原路由相同的组件内容。      
            
    },
    {
        // 访问的名称
        path:"/login",
        // 文件的路径
        component:LoginUser
    },
    // {
    //     path:"/home",
    //     component:HomePage
    // }
]
// Object.key
// 路由实例化 --所有路由配置区
const router = new VueRouter({
    // 路由配置的集合
    routes:routes
})
export default router

提供元数据
第一种
对象形式 props接收参数

第二种方式
接收参数 props
使用params 只能使用name作为标识
使用query 可以使用name和path作为标识

方式的区别：
params直接写在路径上面 query send({id:123})
params 请求头 query请求体

第三种
函数式