526互联

在vue中使用router时所需要的配置

发布时间 2023-12-30 09:40:40作者: 又一岁荣枯

router.js

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

//2. 定义路由组件
import Home from "../views/Home.vue"
import Login from "../views/Login.vue"

//3.定义路由- 配置路由走向
const routes = [
    {
        path: "/", //页面的路径
        component: Login  //去哪个页面
    },
    {
        path: "/home", //页面的路径
        component: Home  //去哪个页面
    }
];

//4. 创建router实例，然后传“routes”配置
const router = createRouter({
    history: createWebHistory(),
    routes
});

//7.导出router
export default router;

main.js

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import router from './router/router'; // Import the router instance

const app = createApp(App);

// Use Element Plus
app.use(ElementPlus);

// Use the router plugin
app.use(router);

// Mount the app with the router
app.mount('#app');

APP.vue

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import Home from './views/Home.vue'
import Login from './views/Login.vue'
</script>

<template>
  <!-- <Login></Login> -->
  <router-view />
</template>

<style>

</style>