router-link标签Cannot read property '$route' of undefined"报错解决方法

报错代码:

<div class="card mb-3 px-3" v-for="item in data" v-bind:key="item.id">
  <router-link :to="{ path:'/exams/details', query:{ name: this.$route.query.name, id: this.$route.params.id} }" class="btn btn-outline-secondary btn-sm button-size">
            点击跳转
  </router-link>
<div>

<script>
export default {
  data() {
	return {
	  plans: []
	}
  },
  async created() {
  	 //请求到数据时$route没有实例化
	 const plans = await this.$axios.get('/plans')
	 this.plans = plans.data
  }
</script>

当放入v-for内时就会报如下错误:

TypeError: Cannot read property '$route' of undefined

报错原因:

this指向问题

解决方法:

去除$route前面的this

<div class="card mb-3 px-3" v-for="item in data" v-bind:key="item.id">
  <router-link :to="{ path:'/exams/details', query:{ name: $route.query.name, id: $route.params.id} }" class="btn btn-outline-secondary btn-sm button-size">
            点击跳转
  </router-link>
<div>
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
根据您提供的代码片段,您想要实现的是根据 `$route.meta.keepAlive` 的值来决定是否缓存 `router-view` 组件。在您的修改中,您想要在 `$route.meta.keepAlive` 为 `true` 时才缓存 `router-view` 组件。 根据您的描述,缓存似乎没有起作用。有几个可能的原因导致缓存失效: 1. `$route.meta.keepAlive` 的值没有正确设置为 `true`。请确保在路由配置中正确设置了 `meta` 字段,以及在对应的路由对象中将 `keepAlive` 设置为 `true`。 2. 使用了相同的 `:key`。在您的代码中,`<router-view>` 组件和 `<keep-alive>` 组件都使用了 `$route.path` 作为 `:key`。这会导致两个组件具有相同的 `:key`,从而导致缓存失效。您可以尝试将 `<keep-alive>` 组件的 `:key` 设置为不同的值,例如使用一个固定的字符串。 下面是您修改后的代码片段,我对其中的一些地方进行了注释,希望能帮助您解决问题: ```html <div class="router" :data-keepAlive="$route.meta.keepAlive"> <breadcrumb class="breadcrumb" /> <!-- 取消下面的注释,并删除上面的 <keep-alive> 组件 --> <!-- <keep-alive> <router-view :key="'cached-' + $route.path"></router-view> </keep-alive> --> <!-- 取消下面的注释,并删除上面的 <router-view> 组件 --> <!-- <keep-alive v-if="$route.meta.keepAlive"> <router-view :key="'cached-' + $route.path"></router-view> </keep-alive> --> <!-- 取消下面的注释,并删除上面的 <router-view> 组件 --> <!-- <router-view :key="'non-cached-' + $route.path"></router-view> --> </div> ``` 请注意,根据您的实际需求,您可能需要根据不同的情况来使用不同的缓存策略。以上代码片段提供了一种思路,但具体实现可能需要根据您的项目结构和需求进行调整。希望这能帮助到您!如果还有其他问题,请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值