Vue-Router 4.x填坑

查阅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>