Vue-router

路由过渡动画

利用<transition>标签可以给路由加上过渡动画，这里只是利用了简单的动画效果。
在src/App.vue文件中加入<transition>标签，包裹在<router-view>的外部。
此时还需要给一个name属性，这里name属性设置为test。

<template>
  <div id="app">
    <img src="./assets/logo.png">
	<div>
			<router-link to="/">跳转到首页面</router-link> |
			<router-link to="/demot">跳转到demot页面</router-link>|
			<router-link :to="{name:'Demot1',params:{username:'Luck',age:80}}">跳转到demot1页面</router-link>|
			<router-link :to="{name:'Demot2',params:{username:'Jack',age:56}}">跳转到demot2页面</router-link>|
			<router-link to="/params/120/武汉樱花">传递参数params页面</router-link>
			<br>
			<p>
			   <router-link to="/demo">demo页面</router-link>|
			   <router-link to="/demo2">返回demo页面</router-link>|
			   <router-link to="/params/525/杭州西湖">携带参数返回params页面</router-link>|
			   <router-link to="/lucy">lucy页面</router-link>|
			   <router-link to="/trans">trans页面</router-link>
			</p>
	</div>
	   <transition name="test" mode="out-in">
          <router-view></router-view>
	   </transition>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.test-enter{
	opacity: 0;
}
.test-enter-active{
	transition: opacity .5s; 
}
.test-leave{
	opacity: 1;
}
.test-leave-active{
	opacity: 0;
	transition:opacity .5s;
}
</style>

test-enter：进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除。
test-enter-active：进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除。
test-leave：离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除。
test-leave-active：离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除。

注意：test-enter-active和test-leave-active在整个进入或离开过程中都有效

过渡模式mode：

in-out：新元素先进入过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡离开，离开完成后新元素过渡进入。

路由配置mode和404页面的处理

1.在路由配置文件src/router/index.js中，若增加mode属性，那么浏览器中的url地址将会发生变化。

mode的两种模式：

hash值：这个是默认的mode值，这时浏览器中的url地址将会多了一个#符号。例如： http://localhost:8080/#/
history值：当你使用 history 模式时，URL 就像正常的 url，例如：http://localhost:8080/

当路由配置中mode属性的值是hash时：（注意观察浏览器地址栏的不同）

export default new Router({
	mode:'hash',
	routes: [
		{
		   path:'/',
		   name:'HelloWorld',
		   component:HelloWorld
		}
	]
})

运行结果：
在这里插入图片描述
当路由配置中mode属性的值是histroy时：（注意观察浏览器地址栏的不同）

export default new Router({
	mode:'history',
	routes: [
		{
		   path:'/',
		   name:'HelloWorld',
		   component:HelloWorld
		}
	]
})

运行结果：
在这里插入图片描述

404页面的处理

2.当用户在浏览器中输入错误的网址时，网页并不会显示“网页不存在”，也不报错，这使得用户的体验感不是很好。
这时我们就可以自己创建一个错误提示页面Error

在src/components目录下新建Error.vue文件，并在网页中输出msg：“404错误，页面不存在”。

<template>
	<div>
		<h3>{{msg}}</h3>
		<p>网页不存在</p>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				msg:'404错误，页面不存在'
			}
		}
	}
</script>
<style>
</style>