过渡动画,导航选中,路由重定向等

vue-router过渡动画导航选中路由重定向

• 动画一般都要控制进出模式(mode="out-in"),不然效果不理想

<transition mode="out-in" name="fade">
	<router-view></router-view>
</transition>

.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}

#	导航样式选中

首页
商品
用户中心

/* 导航样式选中 */
	.active,.router-link-exact-active{
		font-weight: bold;
		background: aquamarine;
	}
```
#	路由模式
```
index.js

const router = new VueRouter({
	mode:'history',
    routes
})
```
+	后端也需要配置,参考<br>
`https://router.vuejs.org/zh/guide/essentials/history-mode.html`

#	路由重定向
```
//路由错误之后, 会重定向到自己指定的路径
	{
		path:'*',
		redirect:'/'
	}
```
#	路由别名
```
{
	path:'/goods',
	alias:'/g',
	component:Goods,
}
http://localhost:8000/g
http://localhost:8000/goods
加别名后,这两个地址等同
```
#	代码详细参考
`https://gitee.com/zenglingchuan/test_vue`