vue3学习笔记（11）router路由初级使用

Vue3专栏入口

路由基本概念：

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

一、router

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

1.1 app.vue

<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

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

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

<template>
    About
</template>

<script lang="ts">

import { defineComponent } from 'vue'

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

<style scoped>
</style>

Home.vue

<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

<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

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

<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

<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

<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

<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

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

<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

<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中进行测试，当组件离开但并未销毁(使用了路由缓存)时。这个钩子将会生效。

<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>