link跳转 2、携带参数...">
美文网首页
vue页面跳转

vue页面跳转

作者: 喜欢走弯路的人 | 来源:发表于2022-02-23 13:55 被阅读0次

    一、router-link跳转

    跳转:

    1、直接跳转 

         <router-link to="/detail/one">link跳转  </router-link>

     2、携带参数跳转

        <router-link :to="{path:'/detail/two', query:{id:1,name:'vue'}}">link跳转  </router-link>

    3、打开新窗口跳转

         <router-link :to="{path:'/detail/three', query:{id:1,name:'vue'}}" target="_blank">link跳转</router-link>

    获取参数:

         id = this.$route.query.id

    二、this.$router.push跳转

    1、path query 跳转:

         this.$router.push({path: "/detail", query: {id: e}})

         获取参数:

         id = this.$route.query.id

    2、name params跳转:

         this.$router.push({name: "/detail", params: {id: e}})

         获取参数:

         id = this.$route.params.id

    三、resolve页面跳转可用新页面打开

    跳转:

           const new = this.$router.resolve({name: '/detail', params: {id: e}})

            或

           const new = this.$router.resolve({path: '/detail', query: {id: e}})

           window.open(new.href,'_blank')

    获取参数:

          id = this.$route.params.id

          或

          id = this.$route.query.id

    相关文章

      网友评论

          本文标题:vue页面跳转

          本文链接:https://www.haomeiwen.com/subject/pvpzlrtx.html