08 Vue-Router
本文是 Vue-Router 使用的实例，更多概念性内容可以参考路由
基础配置
初始化 vue3 项目，选择使用 Vue-Router 插件
1
2
3
| npm create vue@latest
npm install
npm run dev
|
启动之后，自带 Vue-Router，相关ASCII 树如下：
1
2
3
4
5
6
7
8
| src
├── router
│ └── index.js
├── views
│ ├── AboutView.vue
│ └── HomeView.vue
├── App.vue
└── main.js
|
简单看下 router 统一的配置文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView,
},
{
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue'),
},
],
})
export default router
|
main. js 中 use
1
2
3
4
5
6
7
8
9
10
| import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')
|
vue 文件引入 <RouterView />
跳转
- router-link
- setup（useRouter->push）
router/index. js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| import { createRouter, createWebHistory, createWebHashHistory } from "vue-router"
import HomeView from "../views/HomeView.vue"
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
name: "home",
path: "/",
component: HomeView
},
{
name: "about",
path: "/about",
component: () => import("../views/AboutView.vue")
},
{
path: "/router/list",
component: () => import("@/views/router/list.vue")
},
{
name: "params-detail",
path: "/router/detail/:id",
component: () => import("@/views/router/detail.vue")
},
{
name: "query-detail",
path: "/router/detail/",
component: () => import("@/views/router/detail.vue")
}
]
})
export default router
|
list. vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
| <script setup>
import { useRouter, useRoute } from "vue-router"
import { ref } from "vue"
const router = useRouter()
const route = useRoute()
const list = [
{
id: 1,
content: "id 为1的文章内容"
},
{
id: 2,
content: "id 为2的文章内容"
},
{
id: 3,
content: "id 为3的文章内容"
}
]
const toDetail = function (id) {
// replace
// push
router.push({
name: "params-detail",
params: {
id: id
}
})
}
const toDetail2 = function (id) {
router.push({
name: "query-detail",
query: {
id: id
}
})
}
console.log(route.query.page)
const pageIndex = ref(route.query.page === undefined ? 1 : route.query.page)
const nextPage = function () {
pageIndex.value++
}
</script>
<template>
<div class="list">
<h3>params</h3>
<div class="item" v-for="item in list" :key="item.id" @click="toDetail(item.id)">
{{ item.content }}
</div>
<h3>query</h3>
<div class="item" v-for="item in list" :key="item.id" @click="toDetail2(item.id)">
{{ item.content }}
</div>
</div>
<div class="list">
<h2>params</h2>
<router-link replace :to="{ name: 'params-detail', params: { id: item.id } }" v-for="item in list" :key="item.id">
<div class="item">
{{ item.content }}
</div>
</router-link>
<h2>query</h2>
<router-link replace :to="{ name: 'query-detail', query: { id: item.id } }" v-for="item in list" :key="item.id">
<div class="item">
{{ item.content }}
</div>
</router-link>
</div>
<div>
<button>上一页</button>
<router-link :to="{ path: '/router/list', query: { page: pageIndex } }" replace @click="nextPage">
<button>下一页</button>
</router-link>
</div>
</template>
<style scoped></style>
|
detail. vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <script setup>
import {useRoute,useRouter} from 'vue-router'
const route = useRoute()
const router = useRouter()
const goBack = function (){
router.go(-1)
}
</script>
<template>
<div>params:{{route.params.id}}</div>
<div>route:{{route.query.id}}</div>
<button @click="goBack">返回上一页</button>
</template>
<style scoped lang="scss">
</style>
|
