vue3学习笔记（11）router路由初级使用一、router二、路由传参三、路由嵌套四、缓存路由组件 keep-alive五、router专属的生命周期钩子

128 阅读 0 评论 85 点赞

我是靠谱客的博主欢呼花卷，这篇文章主要介绍vue3学习笔记（11）router路由初级使用一、router二、路由传参三、路由嵌套四、缓存路由组件 keep-alive五、router专属的生命周期钩子，现在分享给大家，希望可以做个参考。

Vue3专栏入口

文章目录

一、router
- 1.1 app.vue
- 1.2 main.js
- 1.3index.js
- 1.4 About.vue和Home.vue
- 1.5 结果展示
二、路由传参
- 2.1 目录结构
- 2.2 User.vue
- 2.3 index.js
- 2.4 app.vue
- 2.5 结果展示
三、路由嵌套
- 目录路径
- 3.1 New.vue
- 3.2 User.vue
- 3.3 app.vue
- 3.4 index.js
四、缓存路由组件 keep-alive
- 4.1app.vue
- 4.2 Home.vue
五、router专属的生命周期钩子

路由基本概念：

复制代码

1
2
3
路由就是由一组key-value组成的对应关系。
比如vue中的路由就是路由和组件绑定，后端中就是路由和一系列的逻辑绑定。

一、router

这是我路由的文件结构，多了一个router文件夹用来存放index.js文件编写路由,多了两个vue文件About和Home用来经行演示
在这里插入图片描述

1.1 app.vue

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
	<router-link to="/">Go to home</router-link>
	<router-link to="/About">Go to about</router-link>
	<router-view></router-view>
</template>

<script lang="ts">

import { defineComponent } from 'vue'


export default defineComponent({
	name: 'App',
	setup(props, context) {

	}
})
</script>

<style scoped>
</style>

1.2 main.js

复制代码

1
2
3
4
5
6
7
8
import { createApp } from 'vue'
import App from './App.vue'
import routers from './router'

const app = createApp(App)
app.use(routers)
app.mount('#app')

1.3index.js

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { createRouter, createWebHistory} from 'vue-router'
import Home from '../components/Home.vue'
import About from '../components/About.vue'

const routes = [{
    path: '/',
    component: Home
}, {
    path: '/about',
    component: About
}]

const router = createRouter({
    history: createWebHistory(),
    routes: routes
})

export default router

1.4 About.vue和Home.vue

About.vue

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
    About
</template>

<script lang="ts">

import { defineComponent } from 'vue'

export default defineComponent({
    name: 'About',
    setup(props, context) {
        
    }
})
</script>

<style scoped>
</style>

Home.vue

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
    Home
</template>

<script lang="ts">

import { defineComponent } from 'vue'

export default defineComponent({
    name: 'Home',
    setup(props, context) {
        
    }
})
</script>

<style scoped>
</style>

1.5 结果展示

在这里插入图片描述

二、路由传参

只展示修改了的页面，未修改代码的文件不展示

2.1 目录结构

在这里插入图片描述

2.2 User.vue

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
    <h1>我的id是：{{$route.params.id}}</h1>
</template>

<script lang="ts">

import { defineComponent } from 'vue'

export default defineComponent({
    name:'App',
    setup(props,context){

    }
})
</script>

<style scoped>
</style>

2.3 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
import { createRouter, createWebHistory} from 'vue-router'
import Home from '../components/Home.vue'
import About from '../components/About.vue'
import User from '../components/User.vue'

const routes = [{
    path: '/',
    component: Home
}, {
    path: '/about',
    component: About
}, {
    path: '/user/:id',
    component: User
}]

const router = createRouter({
    history: createWebHistory(),
    routes: routes
})

export default router

2.4 app.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
<template>
	<router-link to="/">Go to home</router-link> | 
	<router-link to="/About">Go to about</router-link> |
	<router-link to="/User/12">Go to User 12</router-link> |
	<router-link to="/User/82">Go to User 82</router-link> |


	<router-view></router-view>
</template>

<script lang="ts">

import { defineComponent } from 'vue'


export default defineComponent({
	name: 'App',
	setup(props, context) {
		
	}
})
</script>

<style scoped>
</style>

2.5 结果展示

在这里插入图片描述

三、路由嵌套

实现效果描述,点击to user 12 / go to user 82/ 我是按钮to user 15 都可以将指定的id 渲染到页面, 并再跳出 to New 链接点击后将指定按钮再次渲染到页面。
在这里插入图片描述

目录路径

在这里插入图片描述

3.1 New.vue

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
    <div>
        id={{$route.params.id}}
        title={{$route.params.title}}
    </div>
</template>

<script lang="ts">

import { defineComponent } from 'vue'

export default defineComponent({
    name:'New',
    setup(props,context){

    }
})
</script>

<style scoped>
</style>

3.2 User.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
<template>
    <h1>我的id是：{{ id }}</h1>
    <router-link :to="{
        name: 'New',
        params: {
            id: id,
            title: 123
        }
    }">
        to New
    </router-link>
    <router-view></router-view>
</template>

<script lang="ts">

import { defineComponent, onMounted } from 'vue'

export default defineComponent({
    name: 'App',
    props: ["id"],
    setup(props, context) {
    }
})
</script>

<style scoped>
</style>

3.3 app.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
<template>
	<router-link to="/">Go to home</router-link> |

	<router-link to="/About">Go to about</router-link> |

	<router-link :to="{
		name:'User',
		params:{
			id:12
		}
	}">
		to user 12
	</router-link>|
		

	<router-link to="/User/82">
		Go to User 82
	</router-link> |

	<button @click="button_click"> 我是按钮 to user 15</button>
	
	<router-view></router-view>
</template>

<script lang="ts">

import { defineComponent } from 'vue'
import router from './router'


export default defineComponent({
	name: 'App',
	setup(props, context) {
		const button_click = (()=>{
			router.push({
				name:'User',
				params:{
					id:15
				}
			})
		})
		return{
			button_click
		}
	}
})
</script>

<style scoped>
</style>

3.4 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
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../components/Home.vue'
import About from '../components/About.vue'
import User from '../components/User.vue'
import New from '../components/New.vue'

const routes = [{
        name: 'Home',
        path: '/',
        component: Home
    },
    {
        name: 'About',
        path: '/about',
        component: About
    },
    {
        name: 'User',
        path: '/user/:id',
        component: User,
        props: true,
        children: [{
            name: 'New',
            path: 'new/:title',
            component: New,
            props: true
        }]
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes: routes
})

export default router

四、缓存路由组件 keep-alive

go to home 后出现一个input框，输入值后点击其他页面，返回后数据依然存在
在这里插入图片描述

4.1app.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
<template>
	<router-link to="/">Go to home</router-link> |

	<router-link to="/About">Go to about</router-link> |

	<router-link :to="{
		name:'User',
		params:{
			id:12
		}
	}">
		to user 12
	</router-link>|
		

	<router-link to="/User/82">
		Go to User 82
	</router-link> |

	<button @click="button_click"> 我是按钮 to user 15</button>

	<!-- include中填写的是组件名如果不填写那么会将所有的路由都缓存 -->
	<router-view v-slot="{ Component }">
		<keep-alive include="Home,About">
			<component :is="Component"/>
		</keep-alive>
	</router-view>
</template>

<script lang="ts">

import { defineComponent } from 'vue'
import router from './router'


export default defineComponent({
	name: 'App',
	setup(props, context) {
		const button_click = (()=>{
			router.push({
				name:'User',
				params:{
					id:15
				}
			})
		})
		return{
			button_click
		}
	}
})
</script>

<style scoped>
</style>

4.2 Home.vue

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
    Home
    <input type="text">
</template>

<script lang="ts">

import { defineComponent, onBeforeUnmount } from 'vue'

export default defineComponent({
    name: 'Home',
    setup(props, context) {
        onBeforeUnmount(()=>{
            console.log('home 销毁');
        })
    }
})
</script>

<style scoped>
</style>

五、router专属的生命周期钩子

onBeforeRouteLeave()
再home中进行测试，当组件离开但并未销毁(使用了路由缓存)时。这个钩子将会生效。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
    Home
    <input type="text">
</template>

<script lang="ts">

import { defineComponent, onBeforeUnmount, onBeforeUpdate, onUpdated } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'

export default defineComponent({
    name: 'Home',
    setup(props, context) {
        onBeforeRouteLeave(()=>{
            console.log("离开Home");
        })
    }
})
</script>

<style scoped>
</style>

最后

以上就是欢呼花卷最近收集整理的关于vue3学习笔记（11）router路由初级使用一、router二、路由传参三、路由嵌套四、缓存路由组件 keep-alive五、router专属的生命周期钩子的全部内容，更多相关vue3学习笔记（11）router路由初级使用一、router二、路由传参三、路由嵌套四、缓存路由组件内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：vue3
浏览次数：128 次浏览
发布日期：2023-12-19 11:40:23
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_o_2_f0_13__23__14_z.html

vue3学习笔记（11）router路由初级使用一、router二、路由传参三、路由嵌套四、缓存路由组件 keep-alive五、router专属的生命周期钩子

文章目录

一、router

1.1 app.vue

1.2 main.js

1.3index.js

1.4 About.vue和Home.vue

1.5 结果展示

二、路由传参

2.1 目录结构

2.2 User.vue

2.3 index.js

2.4 app.vue

2.5 结果展示

三、路由嵌套

目录路径

3.1 New.vue

3.2 User.vue

3.3 app.vue

3.4 index.js

四、缓存路由组件 keep-alive

4.1app.vue

4.2 Home.vue

五、router专属的生命周期钩子

最后

评论列表共有 0 条评论

发表评论取消回复

vue3学习笔记（11）router路由初级使用一、router二、路由传参三、路由嵌套四、缓存路由组件 keep-alive五、router专属的生命周期钩子

文章目录

一、router

1.1 app.vue

1.2 main.js

1.3index.js

1.4 About.vue和Home.vue

1.5 结果展示

二、路由传参

2.1 目录结构

2.2 User.vue

2.3 index.js

2.4 app.vue

2.5 结果展示

三、路由嵌套

目录路径

3.1 New.vue

3.2 User.vue

3.3 app.vue

3.4 index.js

四、缓存路由组件 keep-alive

4.1app.vue

4.2 Home.vue

五、router专属的生命周期钩子

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

微信扫一扫：分享

发表评论取消回复