本文探讨了Vue项目中使用Vue Router时遇到的两个常见问题：切换页签时路由链接高亮失效及如何在项目中正确引入并使用购物车图标。文章详细介绍了如何自定义路由高亮类以及如何从图标库中选取并配置购物车图标。
dist 里 index.html：
index.html： <body background-color> div.#id <script src="bundle.js"></body>
根目录下 index.html：<body background-color> div.#id </body>
App.vue:
分为三部分：template script css
template 里有 div.container
div.container 有三部分：header router-view tabbar
header 里有 返回 按钮 span 包裹 返回，span 上绑定 点击事件 goBack 用来 返回
tabbar 里有 4个页面 每个都由 router-link包裹 router-link 里有 文字和icon 两部分
2个 问题：
切换 页签 时，没有高亮
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/home' }
],
linkActiveClass: 'mui-active' // 覆盖默认的路由高亮的类，默认的类叫做 router-link-active
});
购物车 图标
要自己到 icons-extra 里找
购物车的图标，使用 `icons-extra` 中的 `mui-icon-extra mui-icon-extra-cart`，同时，应该把其依赖的字体图标文件 `mui-icons-extra.ttf`，复制到 `fonts` 目录下！
router.js( 入口文件 )：
//导入路由模块
import VueRouter from 'vue-router'
导入路由组件（没有subcomponents下的组件）
类似 import HomeContainer from './components/tabbar/HomeContainer.vue'
//创建路由对象
var router = new VueRouter({
routes: [ // 配置路由规则
{ path: '/', redirect: '/home' },
{ path: '/home', component: HomeContainer }
],
linkActiveClass: 'mui-active' // 覆盖默认的路由高亮的类，默认的类叫做 router-link-active
})
//把路由对象暴露出去
export default router
扫一扫
1216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
