1. 創(chuàng)建router對象

// createRouter方法，用于創(chuàng)建路由器對象
// createWebHashHistory方法，用于生成hash模式的路由，路由地址中包含一個#
// createWebHistory方法，用于生成history模式的路由
import {createRouter,createWebHashHistory} from 'vue-router'

// 創(chuàng)建當(dāng)前項(xià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方法，返回當(dāng)前項(xiàng)目中的路由器對象
//useRoute方法，返回當(dāng)前路由信息對象
import {useRouter,useRoute} from 'vue-router'
//返回當(dāng)前項(xiàng)目中的路由器對象
let $router = useRouter()
//獲取當(dāng)前路由信息
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中導(dǎo)入createStore方法，該方法，用于創(chuàng)建全局狀態(tài)管理對象
import { createStore } from 'vuex'
// 導(dǎo)入汽車模塊
import car from './modules/car.js'
// 創(chuàng)建一個全局狀態(tài)管理對象
let store = createStore({
    //定義狀態(tài)
    state:{
        firstName:'張',
        lastName:'三'
    },
    //定義圍繞狀態(tài)的計(jì)算屬性
    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
    }
})

//導(dǎo)出全局狀態(tài)管理對象
export default store

4. 使用store

//useStore方法，返回當(dāng)前項(xiàng)目中的全局狀態(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. 注冊

// 導(dǎo)入當(dāng)前項(xiàng)目中創(chuàng)建的全局狀態(tài)管理對象
import store from './store'
// 導(dǎo)入當(dāng)前項(xiàng)目中創(chuàng)建的路由器對象
import router from './router'
// 使用createApp方法創(chuàng)建一個Vue實(shí)例，該方法的參數(shù)是App組件，表示渲染App組件
// use方法，用于給當(dāng)前vue實(shí)例添加功能
// mount方法，用于將渲染后的內(nèi)容，掛載到指定的容器中
createApp(App).use(store).use(router).mount('#app')