Vue-Router相关理解3-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue-Router相关理解3。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

路由跳转的replace方法

Vue-Router相关理解3,vue,vue.js,javascript,前端

编程式路由导航（不用<router-link></router-link>）

Vue-Router相关理解3,vue,vue.js,javascript,前端

src/components/Banner.vue

<template>
    <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header">
            <h2>Vue Router Demo</h2>
            <button @click="back">后退</button>
            <button @click="forward">前进</button>
            <button @click="test">测试一下go</button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Banner',
    methods:{
        back(){
            this.$router.back()
        },
        forward(){
            this.$router.forward()
        },
        test(){
            this.$router.go(3)
        }
    }
}
</script>

src/pages/Message.vue

<template>
    <div>
        <ul>
            <li v-for="m in messageList" :key="m.id">
                <router-link :to="{
                    name: 'xiangqing',
                    query: {
                        id: m.id,
                        title: m.title
                    }
                }">
                    {{ m.title }}
                </router-link>
                <button @click="showPush(m)">push查看</button>
                <button @click="showReplace(m)">replace查看</button>
            </li>
        </ul>
        <hr>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: 'Message',
    data() {
        return {
            messageList: [
                { id: '001', title: '消息001' },
                { id: '002', title: '消息002' },
                { id: '003', title: '消息003' },
            ]
        }
    },
    methods: {
        showPush(m) {
            this.$router.push({
                name: 'xiangqing',
                query: {
                    id: m.id,
                    title: m.title
                }
            })
        },
        showReplace(m) {
            this.$router.replace({
                name: 'xiangqing',
                query: {
                    id: m.id,
                    title: m.title
                }
            })
        }
    }
}
</script>

Vue-Router相关理解3,vue,vue.js,javascript,前端

缓存路由组件

Vue-Router相关理解3,vue,vue.js,javascript,前端

include里面写的是组件名称

src/pages/News.vue

<template>
  <ul>
    <li>news001 <input type="text"></li>
    <li>news002 <input type="text"></li>
    <li>news003 <input type="text"></li>
  </ul>
</template>

<script>
export default {
  name: 'News',
}
</script>

src/pages/Home.vue

<template>
  <div>
    <h2>Home组件内容</h2>
    <div>
      <ul class="nav nav-tabs">
        <li>
          <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
        </li>
        <li>
          <router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
        </li>
      </ul>
      <keep-alive include="News">
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>
  
<script>
export default {
  name: 'Home',
}
</script>

Vue-Router相关理解3,vue,vue.js,javascript,前端