Vue3 中使用路由

Vue应用配置：VueRouter,Bootstrap,Axios集成,

最新推荐文章于 2024-10-06 23:25:04 发布

原创最新推荐文章于 2024-10-06 23:25:04 发布 · 311 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

Vue 专栏收录该内容

10 篇文章

订阅专栏

该文章展示了如何在Vue项目中配置VueRouter进行页面路由管理，引入Bootstrap库以增强UI，并使用axios处理HTTP请求。同时，文章说明了如何在main.js中全局注册VueRouter和axios。

在这里插入图片描述
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;