【Vue】Vue3-route使用总结【和Vue2的区别】

vue3.0中的路由及路由守卫 - 简书

<template>
    <h1>这里是app页面</h1>
    <router-link to="/login">点击login</router-link>
    <router-view></router-view>
</template>

<script>
    export default {
        name: "App",
    };
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

import { createApp } from "vue";
import router from "./router";
import App from "./App.vue";

const app = createApp(App);
/**
 * 特殊说明：Vue3【必须等待use全部加载完成之后,才能执行mount挂载,不然插件会加载无效】
 */
app.use(router).mount("#app");

import { createRouter, createWebHistory } from "vue-router";


const routes = [
    {
        path: "/login",
        name: "login",
        component: () => import("../views/login.vue"),
    },
];


export default createRouter({
    /**
     * history三种可选值
     *      1、createWebHashHistory【/folder/#/app/】,
     *      2、createWebHistory【/folder/】推荐使用！
     *      3、createMemoryHistory】
     *      参考Vue3-route官方文档：https://next.router.vuejs.org/
     */
    history: createWebHistory(),
    routes,
});