本来不想写router 规则匹配的问题,有一个笨球问,顺带写一下,
先配置一下路由
export default new Router({ routes: [ { path: '/', name: 'Index', component: Index }, { path: '/mall', name: 'Mall', component: Mall }, { path: '/shoppingCar', name: 'ShoppingCar', component: ShoppingCar }, { path: '/mySet', name: 'MySet', component: MySet }, { path: '/news', name: 'News', component: News }, { path: '/productDetail', name: 'ProductDetail', component: ProductDetail } ], mode: 'history', linkActiveClass: "active",//配置精确匹配,将router-link-active定义为active scrollBehavior(to, from, savedPosition) { // keep-alive 返回缓存页面后记录浏览位置
//scrollBehavior 滚动行为 if (savedPosition && to.meta.keepAlive) { return savedPosition; } // 异步滚动操作 return new Promise((resolve) => { setTimeout(() => { resolve({ x: 0, y: 1 }); }, 0); }); } })
页面路由
<template> <div class="bottomNav"> <ul> <li> <router-link exact :to="{ name: 'Index', params: {} }">
<!-- exact 只要写一个就可以了 -->
<img src="../../static/images/greenhome.png" />
</router-link>
</li> <li> <router-link :to="{ name: 'Mall', params: {countt:'积分商城'} }"> <img src="../../static/images/grayshop.png" /> </router-link> </li> <li> <router-link :to="{ name: 'ShoppingCar', params: {newsHeader:'购物车',upLeft:true,shopicon:false} }"> <img src="../../static/images/graycar.png" /> </router-link> </li> <li> <router-link :to="{ name: 'MySet', params: {} }"> <img src="../../static/images/graymine.png" /> </router-link> </li> </ul> </div> </template>
<style scoped>
.acitve {
color: red
}
</style>
这样可以在 active 写,匹配到的样式,如果还有图片,建议将图片做成雪碧图,这样直接更改background-position 就可以了