Vue3 中使用路由

最新推荐文章于 2024-05-31 16:08:57 发布

Java朱老师

最新推荐文章于 2024-05-31 16:08:57 发布

阅读量221

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/GodBlessYouAndMe/article/details/129748676

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在这里插入图片描述
package.json:

"vue-router": "^4.1.6",

main.js:

import {createApp} from 'vue'
import App from './App.vue'
import Router from './router'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import axios from 'axios'



const app = createApp(App)
app.use(Router).mount('#app')
app.config.globalProperties.$axios=axios;

router/index.js

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

import App from "../App.vue";



const router = createRouter({

    history: createWebHashHistory(),

    routes : [

        {
            path: "/",

            name: "App",

            component: App,

        },

        {

            path: "/abc",

            name: "ComponentA",


            component: () =>

                import("../components/A.vue"),

        },

    ],

});

export default router;