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

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

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

	


.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
})
```
+	后端也需要配置,参考
`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`

你可能感兴趣的:(Vue)