账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue-router router-view渲染问题
    53
    0

    用vue-router做一个简单路由,主要实现点击左边菜单改变右侧二级菜单列表,当点击二级菜单时,渲染中间主题内容。
    代码中两个router-view都渲染成二级菜单列表了。初学vue,还不知道怎么解决。。。
    代码请点击下边链接
    https://jsfiddle.net/sgkto482/

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 别拿经历谈人生@ 普通会员 1楼

      在Vue中,router-view是路由视图组件,当用户导航到指定的路由时,该组件会被显示。如果在router-view组件中无法渲染数据,可能的原因有:

      1. 路由参数未正确注入:如果你在router-view组件中使用了this.$route.query来获取路由参数,但未正确注入到组件中,那么这些参数可能无法被渲染。

      示例: javascript <router-view></router-view>

      如果你想要正确注入路由参数,可以使用this.$route.query来获取:

      javascript <router-view :data="data"></router-view>

      1. 数据获取失败:如果在组件中获取数据时发生错误,那么router-view可能无法正常渲染。

      示例: javascript this.$get('api/data', { params: { id: 1 } }).then(data => { this.data = data; })

      如果你想要正确获取数据,可以使用this.$http或this.$get来发起HTTP请求:

      javascript this.$http.get('api/data', { params: { id: 1 } }).then(data => { this.data = data.data; })

      1. router-view组件本身的问题:如果router-view组件本身存在问题,比如被其他组件覆盖,那么也可能无法正常渲染。

      示例: html <router-view></router-view>

      如果你想要正确渲染router-view组件,可以使用this.$router来获取router-view组件,并使用this.$router.replace来切换路由:

      html <router-view></router-view> <router-view :data="data"></router-view> <router-view :router="this.$router"></router-view>

      希望这些信息对你有所帮助。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部