zoukankan      html  css  js  c++  java
  • 编程式路由导航

    <template>
      <div>
        <ul>
          <li v-for="item in messages" :key="item.id">
            <!--向message详情组件传参,使用query参数-->
            <router-link :to="`/home/message/detail/?id=${item.id}`">{{item.title}}</router-link>
            <!--编程式路由导航-->
            <button @click="pushShow(item.id)">push查看</button>
            <button @click="replaceShow(item.id)">replace查看</button>
          </li>
        </ul>
        <!--返回-->
        <button @click="$router.back()">返回</button>
        <hr>
        <router-view msg="aaa"></router-view>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          messages: []
        }
      },
      methods: {
        pushShow (id) {
          // 先进后出
          this.$router.push(`/home/message/detail?id=${id}`)
        },
        replaceShow (id) {
          // 先进先出
          this.$router.replace(`/home/message/detail?id=${id}`)
        }
      },
      mounted () {
        setTimeout(() => {
          this.messages = [
            {
              id: 1,
              title: 'message01'
            },
            {
              id: 2,
              title: 'message02'
            },
            {
              id: 3,
              title: 'message03'
            }
          ]
        }, 1000)
      }
    }
    </script>
    
    <style scoped>
    
    </style>
  • 相关阅读:
    接口
    多态
    封装
    初识继承
    对象的行为
    类、对象、包
    Java方法
    winform 报表的基本使用
    oracle配合C#的使用
    sql面试语句与后台调用js提示语句
  • 原文地址:https://www.cnblogs.com/liuyang-520/p/12681758.html
Copyright © 2011-2022 走看看