1逻住、安裝vue3路由
npm install vue-router@4
在入口文件main.js導(dǎo)入router
// 導(dǎo)入當(dāng)前項(xiàng)目中的路由器對象
import router from './router'
// mount()方法，用于將實(shí)例掛載到指定的容器
// use()方法虏辫，用于給實(shí)例安裝插件
createApp(App).use(router).mount('#app')
創(chuàng)建router對象
createRouter()用于創(chuàng)建路由器對象
createWebHistory()方法蜒灰，用于返回history模式路由
createWebHashHistory()方法淌铐，用于返回hash模式路由路由地址包含一個(gè)#號
import {createRouter,createWebHashHistory} from 'vue-router'
// 創(chuàng)建一個(gè)路由器對象
let router = createRouter({
//設(shè)置路由模式（注意：這里跟vue-router3不一樣）
history:createWebHashHistory(),
//配置具體的路由信息
routes:[
//每一個(gè)具體的路由信息澜驮，需要配置一個(gè)單獨(dú)的對象
{
//配置路由地址
path:'/',
//設(shè)置路由名稱
name:'Home',
//設(shè)置路由頁面
component:()=>import('../views/Home.vue')
},
{
path:'/home',
//重定向
redirect:'/'
},
{
path:'/list',
name:'List',
component:()=>import('../views/List.vue')
},
{
// 注意：不可以寫通配符*
// path:'*',
path:'/:pathMatch(.*)*',
name:'Error404',
component:()=>import('../views/Error404.vue')
}
)}
導(dǎo)出路由
export default router
<router-link to="/">首頁</router-link> |
<router-link to="/list">列表</router-link>
<!-- 使用路由視圖組件，展示路由頁面 -->
<router-view></router-view>
使用路由
//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
})
2姑荷、安裝vuex
npm install vuex@next --save
導(dǎo)入
// 導(dǎo)入當(dāng)前項(xiàng)目中的全局狀態(tài)管理對象
import store from './store'
創(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)建一個(gè)全局狀態(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
使用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", "英國");
}
注冊
// 導(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)建一個(gè)Vue實(shí)例陨闹，該方法的參數(shù)是App組件楞捂，表示渲染App組件
// use方法，用于給當(dāng)前vue實(shí)例添加功能
// mount方法趋厉，用于將渲染后的內(nèi)容寨闹，掛載到指定的容器中
createApp(App).use(store).use(router).mount('#app')
