feat 添加路由
This commit is contained in:
parent
3867b78d3f
commit
14a47ff98d
@ -1,16 +1,21 @@
|
||||
## 初始化项目
|
||||
|
||||
```shell
|
||||
npm init -y
|
||||
```
|
||||
|
||||
## 选择打包编译工具
|
||||
|
||||
webpack
|
||||
|
||||
vite(新项目个人推荐)
|
||||
|
||||
## 选择技术栈（推荐使用typescript）
|
||||
|
||||
vue 3 、vue-router 、axios/fetch 、pinia 、dayjs
|
||||
|
||||
## 安装依赖
|
||||
|
||||
```shell
|
||||
npm install 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
|
||||
pnpm install vite @vitejs/plugin-vue typescript vue-tsc
|
||||
```
|
||||
|
||||
## html模板
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
@ -34,7 +41,9 @@ pnpm install vite @vitejs/plugin-vue typescript vue-tsc
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## main.ts
|
||||
|
||||
```ts
|
||||
import {createApp, defineComponent} from 'vue';
|
||||
|
||||
@ -45,7 +54,9 @@ const App = defineComponent({
|
||||
const app = createApp(App)
|
||||
app.mount('#vue-root-app')
|
||||
```
|
||||
|
||||
## package.json的配置
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "admin-fe",
|
||||
@ -60,11 +71,90 @@ app.mount('#vue-root-app')
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
## vite的配置
|
||||
|
||||
[https://cn.vitejs.dev/guide/](https://cn.vitejs.dev/guide/)
|
||||
|
||||
```js
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
export default {
|
||||
// 必须配置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
|
||||
```
|
||||
@ -1,19 +1,32 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>vue3 + vite + {{username}}</h1>
|
||||
<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",
|
||||
setup(){
|
||||
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
|
||||
username,
|
||||
currentPath,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
14
admin-fe/src/Home.vue
Normal file
14
admin-fe/src/Home.vue
Normal 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
14
admin-fe/src/User.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<h1>User</h1>
|
||||
<a href="#/home">Home</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "User"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,5 +1,8 @@
|
||||
import {createApp} from 'vue';
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
const app = createApp(App)
|
||||
// 使用路由
|
||||
app.use(router)
|
||||
app.mount('#vue-root-app')
|
||||
10
admin-fe/src/router/index.js
Normal file
10
admin-fe/src/router/index.js
Normal 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
17
admin-fe/src/router/routes.ts
Normal 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
|
||||
Loading…
x
Reference in New Issue
Block a user