1. 创建router对象
// createRouter方法，用于创建路由器对象
// createWebHashHistory方法，用于生成hash模式的路由，路由地址中包含一个#
// createWebHistory方法，用于生成history模式的路由
import {createRouter,createWebHashHistory} from 'vue-router'
// 创建当前项目中的路由器对象
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，也能获取都路由参数
props:['id']
//监听路由参数id
watch(()=>$route.params.id,(nval)=>{
//清空数组
showList.splice(0)
//向数组中添加最新的数据
showList.push(...list.filter(r=>r.typeId==$route.params.id))
},{
//一上来，先执行一次
immediate:true
})
3. 创建store对象
// 从vuex中导入createStore方法，该方法，用于创建全局状态管理对象
import { createStore } from 'vuex'
// 导入汽车模块
import car from './modules/car.js'
// 创建一个全局状态管理对象
let store = createStore({
//定义状态
state:{
firstName:'张',
lastName:'三'
},
//定义围绕状态的计算属性
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
}
})
//导出全局状态管理对象
export default store
4. 使用store
//useStore方法，返回当前项目中的全局状态管理对象
import { useStore } from "vuex";
// 获取全局状态管理对象
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() {
//调用mutations里面的方法，修改姓
$store.commit("updateFirstName", "李");
}
function updateLastName() {
//调用actions里面的方法，修改名
$store.dispatch("updateLastName", "四");
}
function updateCarName() {
//调用mutations里面的方法，修改车名
$store.commit("car/updateCarName", "宾利");
}
function updateCarAddress() {
//调用actions里面的方法，修改地址
$store.dispatch("car/updateCarAddress", "英国");
}
5. 注册
// 导入当前项目中创建的全局状态管理对象
import store from './store'
// 导入当前项目中创建的路由器对象
import router from './router'
// 使用createApp方法创建一个Vue实例，该方法的参数是App组件，表示渲染App组件
// use方法，用于给当前vue实例添加功能
// mount方法，用于将渲染后的内容，挂载到指定的容器中
createApp(App).use(store).use(router).mount('#app')
