h5中this.$router.push为什么失效
时间: 2023-09-10 17:10:02 浏览: 49
在H5中,`this.$router.push`失效可能有以下几种原因:
1. 没有正确引入Vue Router:在使用Vue Router时,需要先引入Vue Router并将其安装到Vue实例中,如果没有正确引入Vue Router或者没有正确安装,就会导致`this.$router.push`失效。
2. 传递的参数不正确:在使用`this.$router.push`时,需要传递一个包含路径和参数的对象,如果传递的参数不正确,就会导致`this.$router.push`失效。
3. 路由配置不正确:在使用Vue Router时,需要正确配置路由,如果路由配置不正确,就会导致`this.$router.push`失效。
4. 使用了错误的路由模式:在Vue Router中,有两种路由模式:hash模式和history模式。如果使用了错误的路由模式,就会导致`this.$router.push`失效。
以上是一些可能导致`this.$router.push`失效的原因,可以根据实际情况进行排查和解决。
相关问题
如何解决报错vue.runtime.esm.js:4605 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'musicSize')" found in ---> <Anonymous> <App> at src/App.vue <Root>在<template> <div> <div class="flex"> <i class="iconfont icon-fanhuijiantou" @click="returntop"></i> <i class="iconfont icon-diandian"></i> </div> <div class="container"> <h5>{{ name }}</h5> <p>{{ alias }}</p> <p>{{ formatNumber(fansCnt) }}</p> <p class="hheight">{{ imageDesc }}</p> <div class="one"> <span>+ 关注</span> <i class="iconfont icon-xiangxiajiantou"></i> </div> </div> <van-tabs v-model="active" class="over"> <van-tab title="主页"> <homePage></homePage> </van-tab> <van-tab title="歌曲" :badge="singerdeatilList.artist.musicSize"> <songView :id="this.id"></songView> </van-tab> <van-tab title="专辑" :badge="singerdeatilList.artist.albumSize"> <album-view :id="this.id"></album-view> </van-tab> <van-tab title="视频" :badge="singerdeatilList.videoCount"> <videoView></videoView> </van-tab> </van-tabs> </div> </template> <script> import { singerDetailsApi, singerFansApi } from "@/api/singer"; import albumView from "@/views/singer/components/albumView.vue"; import homePage from "@/views/singer/components/homePage.vue"; import songView from "@/views/singer/components/songView.vue"; import videoView from "@/views/singer/components/videoView.vue"; export default { components: { albumView, homePage, songView, videoView, }, data() { return { active: 1, singerdeatilList: [], id: "", fansCnt: "", name: "", //歌手姓名 imageDesc: "", //歌手身份 alias: [], //歌手别名 musicSize: "", //音乐数量 albumSize: "", //专辑数量 }; }, methods: { returntop() { this.$router.push("/singerClass"); }, // fn(fans) { // if (fans > 10000) { // return (fans / 10000).toFixed(1) + "万粉丝"; // } // }, }, async created() { try { // 用query页面数据不会丢失 this.id = this.$route.query.id; let { data } = await singerDetailsApi(this.id); let fans = await singerFansApi(this.id); this.singerdeatilList = data.data; // 歌手名字 this.name = this.singerdeatilList.artist.name; // console.log(this.singerdeatilList.artist.name); // 粉丝数量 this.fansCnt = fans.data.data.fansCnt; // console.log(fans.data.data); // console.log(this.singerdeatilList); // 歌手身份 this.imageDesc = this.singerdeatilList.identify.imageDesc; // 歌手别名 this.alias = this.singerdeatilList.artist.alias[0]; } catch (err) { console.log(err); } }, };这段代码里
报错信息显示 `TypeError: Cannot read properties of undefined (reading 'musicSize')`,意味着在模板中使用 `singerdeatilList.artist.musicSize` 时,`singerdeatilList.artist` 为 `undefined`。
这可能是因为在 `created()` 生命周期中,异步请求的数据还没有返回,导致 `singerdeatilList` 为空。因此,可以在模板中增加一个条件判断,当 `singerdeatilList.artist` 存在时才渲染 `:badge` 属性。
例如:
```
<van-tab title="歌曲" v-if="singerdeatilList.artist" :badge="singerdeatilList.artist.musicSize">
<songView :id="this.id"></songView>
</van-tab>
```
这样就可以避免因为数据还未返回而导致的报错问题。
const handleViewMore = item => { const url = `/pages/daily-${{ 0: 'article', 1: 'pdf' }[item.type]}-list/index?cardId=${ item.cardId }`; uni.navigateTo({ url }); };这段代码在h5端实现
这段代码在 H5 端的实现可以使用 Vue Router 来实现页面的跳转,你可以在 `handleViewMore` 方法中使用 `this.$router.push()` 方法来实现跳转。具体实现方法如下:
```javascript
const handleViewMore = item => {
const url = `/pages/daily-${{ 0: 'article', 1: 'pdf' }[item.type]}-list/index?cardId=${item.cardId}`;
this.$router.push(url);
};
```
其中,`$router` 是 Vue Router 提供的路由实例,它可以在组件的实例中通过 `this.$router` 来获取。在这个方法中,我们使用 `push()` 方法来跳转到指定的页面。在 `push()` 方法中,我们传入页面的路径 `url`,即可以实现页面跳转。