Vue3如何使用Vue-Router进行路由控制

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中，根元素可以不为一个，在template下可以有多个根节点
，所以<div id="app">不一定要按照官方示例去写 -->
<div id="app">
  <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- 当你点击 Go to Home这个超链接后，下面这个router-view
  元素会渲染路由“/”里面对应的组件，如果你想要把当前页面全部都变更渲染
  那么你的router-view应该在当前组件的父组件上声明。-->
  <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这个标签，因为是UI框架提供的。 -->
      <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; //用于设置超链接字体颜色
    }
</style>

# 这里的coms是给src/components设置的路径别名，这个js文件的路径为
# 项目根目录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,
}];
# 关于history mode和 hash mode差异请看文末官方文档
const router = createRouter({
    history: createWebHistory(),
    routes: routes,
});
#路由守卫，实现未登录的用户他跳转到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会清除router栈的历史记录
            //即无法点击返回按钮，这里指的是跳转到home组件
            //这里名称为home的组件可以不在当前脚本中import
            router.replace({ name: "home" });
          }
        })
        .catch((err) => console.log(err));
    }
    return {verifyUserName,}
}
</script>