yarn add vue-router@4 --save

	import { createApp } from 'vue'
	import App from './App.vue'
	import router from './router'
	import naive from 'naive-ui'
	createApp(App).use(router).use(naive).mount('#app')

<!-- 在Vue3.x中，根元素可以不為一個(gè)，在template下可以有多個(gè)根節(jié)點(diǎn)
，所以<div id="app">不一定要按照官方示例去寫 -->
<div id="app">
  <p>
    <!--使用 router-link 組件進(jìn)行導(dǎo)航 -->
    <!--通過傳遞 `to` 來指定鏈接 -->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- 當(dāng)你點(diǎn)擊 Go to Home這個(gè)超鏈接后，下面這個(gè)router-view
  元素會(huì)渲染路由“/”里面對應(yīng)的組件，如果你想要把當(dāng)前頁面全部都變更渲染
  那么你的router-view應(yīng)該在當(dāng)前組件的父組件上聲明。-->
  <router-view></router-view>
</div>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  setup() {
    const menus = [
      { key: "首頁", to: "Index" },
      { key: "商品清單", to: "ItemList" },
      { key: "提交歷史", to: "History" },
    ];
    return {
      menus,
    };
  },
});
</script>

? ? <div id="app">
? ? ? <!-- 在這里我使用的NaviueUI,如果你用的elementUI道理差不多，
? ? ? ?可以忽略n-button這個(gè)標(biāo)簽，因?yàn)槭荱I框架提供的。 -->
? ? ? <n-button ?
? ? ? ? color="#b5b7ba"
? ? ? ? text
? ? ? ? v-for="(item, index) in menus"
? ? ? ? :key="index"
? ? ? ? class="redTextWithoutUnderline"
? ? ? >
? ? ? <router-link :to="item.to">{{ item.key }} </router-link>
? ? ? </n-button>
? ? </div>

<style>
?? ?.redTextWithoutUnderline {
?? ? text-decoration: none;//用于取消超鏈接下劃線
?? ? color:red; //用于設(shè)置超鏈接字體顏色
?? ?}
</style>

# 這里的coms是給src/components設(shè)置的路徑別名，這個(gè)js文件的路徑為
# 項(xiàng)目根目錄router/index.js
import { createWebHistory, createRouter } from "vue-router";
import Login from "coms/Login.vue";
import Home from "coms/Home.vue";
# 定義具體的路由
const routes = [{
    path: "/login",
    name: "login",
    component: Login,
}, {
    path: "/",
    name: "home",
    component: Home,
}];
# 關(guān)于history mode和 hash mode差異請看文末官方文檔
const router = createRouter({
    history: createWebHistory(),
    routes: routes,
});
#路由守衛(wèi)，實(shí)現(xiàn)未登錄的用戶他跳轉(zhuǎn)到login頁面
router.beforeEach((to, from, next) => {
    var uid = window.sessionStorage.getItem('uuid');
    if (to.name !== "login" && !!!uid) {
        next({ name: 'login' })
    } else {
        next()
    }
})
#暴露路由組件
export default router;

<script>
//無需解釋，引入vue-router組件
import { useRouter } from "vue-router";
 setup() {
   //獲取router的引用
   const router = useRouter();
   function verifyUserName() {
      verifyUserNameAPI(loginForm)
        .then((res) => {
          if (res.code === 0) {
            console.log("登錄成功")
          } else {
              console.log("登錄失敗")
            });
            //replace會(huì)清除router棧的歷史記錄
            //即無法點(diǎn)擊返回按鈕，這里指的是跳轉(zhuǎn)到home組件
            //這里名稱為home的組件可以不在當(dāng)前腳本中import
            router.replace({ name: "home" });
          }
        })
        .catch((err) => console.log(err));
    }
    return {verifyUserName,}
}
</script>