查阅Vue-Router 4.x官方文档(Vue Router 4.x),你会发现里面讲得很不完善,跳过了很多步骤,如果按照官方文档在项目中使用,你会发现很多地方会报错。这里讲下Vue-Router 4.x的正确使用方式:
1、引入createRouter、createWebHashHistory:
import { createRouter, createWebHashHistory } from "vue-router";
/src/router/index.js:
import { createRouter, createWebHashHistory } from "vue-router";
const router = createRouter({
history: createWebHashHistory(),
routes: [{
path: "/",
title: "监控",
icon: <platform />,
component: () => import("../views/Home")
}, {
path: "/config",
title: "报警设置",
icon: <odometer />,
component: () => import("../views/Config")
}]
})
export default router
2、Vue中注册Router:
/src/main.js:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'
const app = createApp(App);
app.use(router).mount('#app');
3、使用:
router-link、router-view
/src/components/Header.vue:
<template>
<el-menu
:default-active="currentPath"
background-color="#24292f"
text-color="#fff"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
router
>
<el-menu-item
:index="route.path"
v-for="route in $router.options.routes"
:key="route.path"
>{{route.title}}</el-menu-item>
</el-menu>
</template>
<script>
import { defineComponent, computed } from "vue";
import { useRoute } from "vue-router";
export default defineComponent({
setup() {
const route = useRoute();
const currentPath = computed(() => route.path);
const handleSelect = (key, keyPath) => {
console.log(key, keyPath);
};
return {
currentPath,
handleSelect
};
}
});
</script>
<style>
.el-menu-item {
font-size: 18px;
color: #fff;
}
</style>
/src/App.vue:
<template>
<el-container>
<el-header>
<el-row :span="1">
<el-col :span="22" :offset="1">
<Header />
</el-col>
</el-row>
</el-header>
<el-main>
<el-row :span="1">
<el-col :span="22" :offset="1">
<router-view></router-view>
</el-col>
</el-row>
</el-main>
</el-container>
</template>
<script>
import Header from "./components/Header.vue"
export default {
name: "App",
components: {
Header
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
.el-header {
padding: 0;
background: #24292f;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
text-align: left;
-webkit-box-shadow: 0 0 0 0 rgb(0 0 0 / 10%);
box-shadow: 0 0 0 0 rgb(0 0 0 / 10%);
}
.el-button--primary {
color: #FFF;
background-color: #036EEF;
border-color: #036EEF;
}
</style>