Vue学习笔记67--编程式路由导航

编程式路由导航

 

示例一：

Message.vue

<template>
  <div>
    <h3>Message page</h3>
    <ul>
      <li v-for="m in messageList"
          :key="m.id">
        <!-- <router-link :to="{
            // path: '/home/detail',
            name:'detail',
            params: {
              id:m.id,
              title:m.title
            }
          }">
          {{ m.title }}
        </router-link> -->

        <button @click="pushShow(m)">push查看</button>
        <button @click="replaceShow(m)">replace查看</button>
      </li>
    </ul>
    <hr>
    <router-view></router-view>

  </div>
</template>

<script>
export default {
  name: 'Message',
  data () {
    return {
      messageList: [
        { id: '001', title: 'message 001' },
        { id: '002', title: 'message 002' },
        { id: '003', title: 'message 003' },
      ]
    }
  },
  methods: {
    pushShow (m) {
42       // console.log('$router==>', this.$router)
43       this.$router.push({
44         name: 'detail',
45         params: {
46           id: m.id,
47           title: m.title
48         }
49       })
50     },
51     replaceShow (m) {
52       this.$router.replace({
53         name: 'detail',
54         params: {
55           id: m.id,
56           title: m.title
57         }
58       })
    }
  }

}
</script>

<style>
</style>

Banner.vue

<template>
  <div>
    <h2>Vue Router Demo</h2>
    <button @click="back">后退</button>
    <button @click="forward">前进</button>
    <button @click="go">go</button>
  </div>
</template>

<script>
export default {
  name: 'Banner',
  methods: {
    back () {
15       this.$router.back();
16     },
17     forward () {
18       this.$router.forward();
19     },
20     go () {
21       // this.$router.go();// 用于前进或后退
22       this.$router.go(2);//表示前进2步
23       this.$router.go(-2);//表示后退2步
24     },
  },
}
</script>

<style>
</style>