1. 程式人生 > >vue項目功能

vue項目功能

style out font set imp active lin views ati

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

vue項目功能