vue-router嵌套路由点击无反应,地址也不跳转

原创
10/18 15:31
阅读数 0

遇到个bug,分享下。

在Home.vue组件里,写了2个router-link,跳转到2个子路由(已注册)

<template>
  <div>
    <h2>首页</h2>
    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/message">消息</router-link>
    <router-view/>
  </div>
</template>

但是测试发现,点击router-link无反应,地址也不改变,但是to的地址随便改成个未注册的,地址却能够改变(由于未注册,点击后页面空白)。

最后发现,是该Home.vue组件是用代码片段快速生成的,该组件内默认写了beforeRouteUpdate() {}(组件路由卫士),在路由更新前,被拦截了。只需将其注释掉即可.

<script>
export default {
  name:"Home",
  components: {},
  props: {},
  data() {
    return {

    };
  },
  computed: {},
  methods: {

  },
  filter: {},
  watch: {},
  created() {},
  mounted() {},
  activited() {},
  update() {},
  // 组件路由卫士,注释掉即可
  beforeRouteUpdate() {},
};
</script>

另外,写路由常见的错误还有:

1、有没有写<router-view/>;

2、配置子路由,children: 内的地址前不加斜杠 /;

3、router-link标签内子路由地址要写全,如<router-link to="/home/news">新闻</router-link>;

4、配置路由,component没有s

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部