首页<template> <div> <router-view /> <van-tabbar v-model="active"> <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item> <van-tabbar-item icon="shopping-cart-o" to="/shopcar" >购物车</van-tabbar-item > <van-tabbar-item icon="friends-o">我的</van-tabbar-item> </van-tabbar> </div> </template> <script> export default { data() { return { active: 0, }; }, methods: {}, watch: { // active() { // if (this.active == 0) { // this.$router.push("/home"); // } else if (this.active == 1) { // this.$router.push("/shopcar"); // } // }, }, }; </script> <style scoped> .van-tabbar-item--active { color: red; } </style>为什么跳转到购物车不会高亮显示呢

<template> <div> <router-view /> <van-tabbar v-model="active"> <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item> <van-tabbar-item icon="shopping-cart-o" to="/shopcar" >购物车</van-tabbar-item > <van-tabbar-item icon="friends-o">我的</van-tabbar-item> </van-tabbar> </div> </template> <script> export default { data() { return { active: 0, }; }, methods: {}, watch: { // active() { // if (this.active == 0) { // this.$router.push("/home"); // } else if (this.active == 1) { // this.$router.push("/shopcar"); // } // }, }, }; </script> <style scoped> .van-tabbar-item--active { color: red; } </style>为什么跳转到购物车不会高亮显示呢

时间: 2024-02-27 18:55:07 浏览: 188

vue-router 按需加载 component: () = import() 报错的解决

vue的单页面（SPA）项目,必然涉及路由按需的问题。以前我们是这么做的 //require.ensure是webpack里面的，这样做会将单独拉出来作为一个chunk文件 const Login = r => require.ensure( [], () => r (require(‘../component/Login.vue’))); 但现在vue-router的官网看看，推荐这种方式： //vue异步组件和webpack的【代码分块点】功能结合，实现了按需加载 const App = () => import(‘../component/Login.vue’); 可是，很多情

在代码中，购物车页面对应的 `van-tabbar-item` 组件并没有设置 `to` 属性，而是直接作为静态内容呈现在了 `van-tabbar` 中。因此，当路由切换到购物车页面时，虽然 URL 已经匹配到了 `/shopcar`，但是 `van-tabbar-item` 组件并没有被激活，因此也就无法显示高亮样式。要解决这个问题，可以将购物车页面对应的 `van-tabbar-item` 组件的 `to` 属性设置为 `/shopcar`，这样在路由切换到购物车页面时，对应的 `van-tabbar-item` 组件就会被激活，并显示高亮样式。修改后的代码如下所示： ```html <van-tabbar-item icon="shopping-cart-o" to="/shopcar">购物车</van-tabbar-item> ```

阅读全文