# router-view 标签

原本在 edit 页面，通过 v-if 绑定侧边栏，当点击侧边栏内的按钮后，URL 会发生改变，携带 tempID 返回构成一个新的 URL。需求是 URL 发生变化后页面重新跳转至新的 URL 页面，实际是页面并没有刷新，即使 URL 栏已经改变，需要手动刷新后才能到预期的 URL 页面

你可以把 router-view 当做是一个容器，它渲染的组件是你使用 vue-router 指定的

	<template>
	<section class="app-main">
	<transition name="fade-transform" mode="out-in">
	<router-view :key="key" /> //key属性
	</transition>
	</section>
	</template>

	<script>
	export default {
	name: 'AppMain',
	computed: {
	key() {
	return this.$route.fullPath
	}
	}
	}
	</script>

这里 router-view 有一个 key 的属性，这个 key 的属性作用是：

由于 Vue 会复用相同组件，即 /page/a => /page/b 或者 /page?id=a => /page?id=b 这类链接跳转时，将不再执行 created，mounted 之类的钩子，这时候你需要在路由组件中，添加 beforeRouteUpdate 钩子来执行相关方法拉取数据

从 /page/a => /page/b，由于这两个路由的 $route.path 并不一样，所以组件被强制不复用，相关钩子加载顺序为 beforeRouteUpdate => created => mounted

从 /page?id=a => /page?id=b，由于这两个路由的 $route.path 一样，所以和没设置 key 属性一样，会复用组件，相关钩子加载顺序为：beforeRouteUpdate

从 /page/a => /page/a，由于这两个路由的 $route.fullPath 并不一样，所以组件被强制不复用，相关钩子加载顺序为 beforeRouteUpdate => created => mounted

从 /page?id=a => /page?id=b，由于这两个路由的 $route.fullPath 并不一样，所以组件被强制不复用，相关钩子加载顺序为 beforeRouteUpdate => created => mounted

在 App.vue 中加入上述代码片段，设置 router-view 的 key 属性值为 $route.fullPath，这样一来，新的 ID 返回后组件强制不复用，就可以实现页面重新加载跳转的效果。