1. 創(chuàng)建router對象
// createRouter方法汗盘，用于創(chuàng)建路由器對象
// createWebHashHistory方法砂吞，用于生成hash模式的路由腿椎，路由地址中包含一個#
// createWebHistory方法，用于生成history模式的路由
import {createRouter,createWebHashHistory} from 'vue-router'
// 創(chuàng)建當前項目中的路由器對象
let router = createRouter({
//定義路由模式
history:createWebHashHistory(),
//定義具體的路由信息
routes:[
//每一條路由信息惠遏，配置一個對象
{
path:'/',
name:'home',
component:()=>import('../views/Home.vue')
},
{
path:'/store',
name:'store',
component:()=>import('../views/Store.vue')
},
{
path:'/list/:id',
props:true,
name:'list',
component:()=>import('../views/List.vue')
},
{
path:'/news',
name:'news',
component:()=>import('../views/News.vue')
},
{
path:'/page1',
name:'page1',
component:()=>import('../views/Page1.vue')
},
{
// 注意：不可以寫通配符*
// path:'*',
path:'/:pathMatch(.*)*',
name:'error404',
component:()=>import('../views/Error404.vue')
}
]
})
export default router
2. 使用router
//useRouter方法蓬坡，返回當前項目中的路由器對象
//useRoute方法，返回當前路由信息對象
import {useRouter,useRoute} from 'vue-router'
//返回當前項目中的路由器對象
let $router = useRouter()
//獲取當前路由信息
let $route = useRoute()
//通過props片迅，也能獲取都路由參數(shù)
props:['id']
//監(jiān)聽路由參數(shù)id
watch(()=>$route.params.id,(nval)=>{
//清空數(shù)組
showList.splice(0)
//向數(shù)組中添加最新的數(shù)據(jù)
showList.push(...list.filter(r=>r.typeId==$route.params.id))
},{
//一上來残邀，先執(zhí)行一次
immediate:true
})
3. 創(chuàng)建store對象
// 從vuex中導入createStore方法，該方法柑蛇，用于創(chuàng)建全局狀態(tài)管理對象
import { createStore } from 'vuex'
// 導入汽車模塊
import car from './modules/car.js'
// 創(chuàng)建一個全局狀態(tài)管理對象
let store = createStore({
//定義狀態(tài)
state:{
firstName:'張',
lastName:'三'
},
//定義圍繞狀態(tài)的計算屬性
getters:{
fullName(state){
return state.firstName+'.'+state.lastName
}
},
//定義同步方法
mutations:{
updateFirstName(state,val){
state.firstName = val
},
updateLastName(state,val){
state.lastName = val
}
},
//定義異步方法
actions:{
updateFirstName(store,val){
setTimeout(() => {
store.commit('updateFirstName',val)
}, 1000);
},
updateLastName(store,val){
setTimeout(() => {
store.commit('updateLastName',val)
}, 1000);
}
},
//模塊
modules:{
car
}
})
//導出全局狀態(tài)管理對象
export default store
4. 使用store
//useStore方法芥挣，返回當前項目中的全局狀態(tài)管理對象
import { useStore } from "vuex";
// 獲取全局狀態(tài)管理對象
let $store = useStore();
let firstName = computed(() => {
return $store.state.firstName;
});
let lastName = computed(() => {
return $store.state.lastName;
});
let fullName = computed(() => {
return $store.getters.fullName;
});
let carName = computed(() => {
return $store.state.car.carName;
});
let address = computed(() => {
return $store.state.car.address;
});
let carInfo = computed(() => {
return $store.getters["car/carInfo"];
});
function updateFirstName() {
//調(diào)用mutations里面的方法，修改姓
$store.commit("updateFirstName", "李");
}
function updateLastName() {
//調(diào)用actions里面的方法耻台，修改名
$store.dispatch("updateLastName", "四");
}
function updateCarName() {
//調(diào)用mutations里面的方法空免，修改車名
$store.commit("car/updateCarName", "賓利");
}
function updateCarAddress() {
//調(diào)用actions里面的方法，修改地址
$store.dispatch("car/updateCarAddress", "英國");
}
5. 注冊
// 導入當前項目中創(chuàng)建的全局狀態(tài)管理對象
import store from './store'
// 導入當前項目中創(chuàng)建的路由器對象
import router from './router'
// 使用createApp方法創(chuàng)建一個Vue實例盆耽，該方法的參數(shù)是App組件蹋砚，表示渲染App組件
// use方法扼菠，用于給當前vue實例添加功能
// mount方法，用于將渲染后的內(nèi)容坝咐，掛載到指定的容器中
createApp(App).use(store).use(router).mount('#app')
