.NET Core與Vue3組合開發技_第04天_使用vite創建後台管理系統專案part2.

 

配置下載路由package

npm install vue-router@next --save

在src目錄下建立相應目錄層級與程式檔案

src\router\index.ts 這裡配置路由

這邊會是一個array型態

1 2 3 4 5 6 7 8 9 10 11 12

import {createRouter,createWebHistory} from 'vue-router' import LoginPage from '../view/index/LoginPage.vue' const router = createRouter( { history:createWebHistory(), routes:[ {path:"/login" , component:LoginPage} ] } ) export default router;

src\view\admin

src\view\index\LoginPage.vue

1 2 3

<template> <div>Login Page</div> </template>

src\main.ts

1 2 3 4 5 6 7 8 9 10

import { createApp } from 'vue' import './style.css' import App from './App.vue' import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css'; import router from './router/index'; createApp(App) .use(ElementPlus) .use(router) .mount('#app')

再到App.vue添加 <router-view>

src\App.vue

路由標籤在此進行配置完後才能成功存取到

1 2 3 4 5 6 7

<template> <router-view></router-view> </template> <style lang="scss" scoped> </style>

這裡把預設範本清空便比較乾淨的狀態

當路由訪問就可看到成功存取