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

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

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue如何组件切换时路由改变
    22
    0

    有一个组件,该组件内部没有任何路由,也就是说组件内切换url不会变,现在需要把组件内不同的视图绑上不同的url,而且需要维护独立的routes,以便迁移,通用
    目前该组件的情况如下
    1,用components局部注册子组件,
    2 ,内部很多div 根据v-if=不同,切换不同的视图
    比如
    view=='list'时,显示列表视图
    view=='add',显示新增视图
    遇到的问题是:
    1,组件是局部注册的,父子组件强耦合,拆开难度太大,
    2,addRoutes()的时机找不到

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • 可口的草莓 普通会员 1楼

      在Vue中,组件切换时路由改变可以通过改变路由对象的router属性来实现。以下是具体的步骤:

      1. 首先,你需要创建一个Vue实例并添加一个router属性。例如:

      javascript new Vue({ el: '#app', router: { path: '/user/:id', component: User } })

      1. 然后,当你点击切换路由按钮时,你可以使用router.push()方法来改变路由。例如:

      javascript document.getElementById('switch').addEventListener('click', function() { this.$router.push('/user/' + this.$route.params.id); });

      在这个例子中,当点击切换路由按钮时,this.$router.push('/user/' + this.$route.params.id)会改变路由,使User组件被跳转到/user/:id

      注意,this.$route.params.id是用来获取当前路由的参数值的。例如,如果你的路由是/user/:id,那么this.$route.params.id就是id的值。

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