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>
- 在
src/router/index.js
文件中引入Error文件
import Error from '@/components/error'
- 在
src/router/index.js
文件中进行路由配置,此时path
参数配置为*
{
path:'*',
component:Error
}
当浏览器的地址栏里面输入不存在的网页时,会出现以下页面: