项目功能插件

1、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渲染为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)

				

					
				
				

					
				
				

					
				
				

					
				
			

2、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: {
 
}

				

					
				
				

					
				
				

					
				
				

					
				
			

3、vue-cookies