vue项目功能

vue-router

        {
            path: '/',
            name: 'home',
            // 路由的重定向
            redirect: '/home'
        }

        {
            // 一级路由, 在根组件中被渲染, 替换根组件的<router-view/>标签
            path: '/one-view',
            name: 'one',
            component: () => import('./views/OneView.vue')
        }

        {
            // 多级路由, 在根组件中被渲染, 替换根组件的<router-view/>标签
            path: '/one-view/one-detail',
            component: () => import('./views/OneDetail.vue'),
            // 子路由, 在所属路由指向的组件中被渲染, 替换该组件(OneDetail)的<router-view/>标签
            children: [{
                path: 'show',
                component: () => import('./components/OneShow.vue')
            }]
        }

 

 

 

 

 

router-link

　　<!-- router-link渲染为a标签 -->

        <router-link to="/">Home</router-link> |
        <router-link to="/about">About</router-link> |
        <router-link :to="{name: 'one'}">One</router-link> |

        <!-- 为路由渲染的组件占位 -->
        <router-view />

 

        a.router-link-exact-active {
            color: #42b983;
        }

 

        // router的逻辑转跳
        this.$router.push('/one-view')

        // router采用history方式访问上一级
        this.$router.go(-1)

 

 

 

vuex

        // 在任何一个组件中,均可以通过this.$store.state.msg访问msg的数据
        // state永远只能拥有一种状态值
        state: {
            msg: "状态管理器"
        },
        // 让state拥有多个状态值
        mutations: {
            // 在一个一个组件中,均可以通过this.$store.commit('setMsg', new_msg)来修改state中的msg
            setMsg(state, new_msg) {
                state.msg = new_msg
            }
        },
        // 让mutations拥有多个状态值
        actions: {

        }