project/point_sys_api
2
1
Fork 0
Code Issues 1 Pull Requests Packages Projects 1 Releases Wiki Activity

feat 添加路由

Browse Source
This commit is contained in:
LittleBoy 2022-12-05 10:36:03 +08:00
parent 3867b78d3f
commit 14a47ff98d
7 changed files with 164 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
admin-fe/README.MD
View File

@ -1,16 +1,21 @@
## 初始化项目 ## 初始化项目
```shell ```shell
npm init -y npm init -y
``` ```
## 选择打包编译工具 ## 选择打包编译工具
webpack webpack
vite(新项目个人推荐) vite(新项目个人推荐)
## 选择技术栈（推荐使用typescript） ## 选择技术栈（推荐使用typescript）
vue 3 、vue-router 、axios/fetch 、pinia 、dayjs vue 3 、vue-router 、axios/fetch 、pinia 、dayjs
## 安装依赖 ## 安装依赖
```shell ```shell
npm install vue vue-router pinia dayjs npm install vue vue-router pinia dayjs
yarn add vue vue-router pinia dayjs yarn add vue vue-router pinia dayjs
@ -20,7 +25,9 @@ npm install vite @vitejs/plugin-vue typescript vue-tsc
yarn add -D vite @vitejs/plugin-vue typescript vue-tsc yarn add -D vite @vitejs/plugin-vue typescript vue-tsc
pnpm install vite @vitejs/plugin-vue typescript vue-tsc pnpm install vite @vitejs/plugin-vue typescript vue-tsc
``` ```
## html模板 ## html模板
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
@ -34,7 +41,9 @@ pnpm install vite @vitejs/plugin-vue typescript vue-tsc
</body> </body>
</html> </html>
``` ```
## main.ts ## main.ts
```ts ```ts
import {createApp, defineComponent} from 'vue'; import {createApp, defineComponent} from 'vue';
@ -45,7 +54,9 @@ const App = defineComponent({
const app = createApp(App) const app = createApp(App)
app.mount('#vue-root-app') app.mount('#vue-root-app')
``` ```
## package.json的配置 ## package.json的配置
```json ```json
{ {
"name": "admin-fe", "name": "admin-fe",
@ -60,11 +71,90 @@ app.mount('#vue-root-app')
} }
``` ```
## vite的配置 ## vite的配置
[https://cn.vitejs.dev/guide/](https://cn.vitejs.dev/guide/)
```js ```js
import vue from '@vitejs/plugin-vue' import vue from '@vitejs/plugin-vue'
export default { export default {
// 必须配置vue插件 // 必须配置vue插件
plugins: [vue()] plugins: [vue()]
} }
``` ```
## 路由
#### 当页面比较少时，可以考虑直接使用if判断限制不使用组件
```vue
<template>
<div>
<h1>vue3 + vite + {{ username }} {{ currentPath }}</h1>
<input type="text" v-model="username">
<template v-if="currentPath == '/home'">
<Home/>
</template>
<User v-if="currentPath == '/user'"/>
</div>
</template>
<script lang="ts">
import {ref} from "vue";
import Home from "./Home.vue";
import User from "./User.vue";
export default {
name: "App",
components: {User, Home},
setup() {
const username = ref<string>()
const currentPath = ref<string>(location.hash ? location.hash.substring(1) : '/home')
window.onhashchange = () => {
currentPath.value = location.hash ? location.hash.substring(1) : '/home'
}
return {
username,
currentPath,
}
}
}
</script>
<style scoped>
</style>
```
#### 页面较多 则使用vue-router
[https://router.vuejs.org/zh/introduction.html](https://router.vuejs.org/zh/introduction.html)
```shell
// 1.定义路由
const routes = [
{
path: '路径',
component: 组件对象,
redirect: '要跳转的路径',
children:[ // 路由嵌套
{
path: '路径',
component: 组件对象,
}
]
}
]
// 2.创建路由对象
import {createRouter} from 'vue-router'
const router = createRouter({
routes: routes
})
// 3.使用路由
const app = createApp();
app.use(router); // 在应用使用router
```

19
admin-fe/src/App.vue
View File

@ -1,19 +1,32 @@
<template> <template>
<div> <div>
<h1>vue3 + vite + {{username}}</h1> <h1>vue3 + vite + {{ username }} {{ currentPath }}</h1>
<input type="text" v-model="username"> <input type="text" v-model="username">
<template v-if="currentPath == '/home'">
<Home/>
</template>
<User v-if="currentPath == '/user'"/>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import {ref} from "vue"; import {ref} from "vue";
import Home from "./Home.vue";
import User from "./User.vue";
export default { export default {
name: "App", name: "App",
setup(){ components: {User, Home},
setup() {
const username = ref<string>() const username = ref<string>()
const currentPath = ref<string>(location.hash ? location.hash.substring(1) : '/home')
window.onhashchange = () => {
currentPath.value = location.hash ? location.hash.substring(1) : '/home'
}
return { return {
username username,
currentPath,
} }
} }
} }

14
admin-fe/src/Home.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<h1>Home</h1>
<a href="#/user">User</a>
</template>
<script>
export default {
name: "Home"
}
</script>
<style scoped>
</style>

14
admin-fe/src/User.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<h1>User</h1>
<a href="#/home">Home</a>
</template>
<script>
export default {
name: "User"
}
</script>
<style scoped>
</style>

3
admin-fe/src/main.ts
View File

@ -1,5 +1,8 @@
import {createApp} from 'vue'; import {createApp} from 'vue';
import App from './App.vue' import App from './App.vue'
import router from './router'
const app = createApp(App) const app = createApp(App)
// 使用路由
app.use(router)
app.mount('#vue-root-app') app.mount('#vue-root-app')

10
admin-fe/src/router/index.js Normal file
View File

@ -0,0 +1,10 @@
import {createRouter, createWebHistory} from 'vue-router'
import routes from "./routes";
const baseUrl = '' // 主要配置二级目录
const router = createRouter({
// 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
history: createWebHistory(baseUrl), // 此模式在部署时需要配置服务
routes
})
export default router

17
admin-fe/src/router/routes.ts Normal file
View File

@ -0,0 +1,17 @@
import {RouteRecordRaw} from "vue-router";
import Home from './../Home.vue'
import User from './../User.vue'
const routes: RouteRecordRaw[] = [
{
path: '/home',
component: Home
},
{
path: '/user',
component: User
}
]
export default routes