iT邦幫忙

0

Day34 - 自定義切換路由方法

  • 分享至 

  • xImage
  •  

vue router 文件中有提到一些方法,可以讓我們使用
參考資訊

我們先在 menu.vue 內新增兩個 <a> 連結,一個是切換到指定頁面,一個是回到上一頁:

<template>
    <div class="hello">
        <ul class="nav">
            <li class="nav-item">
                <router-link class="nav-link" to="/page">卡片1</router-link>
            </li>
            <li class="nav-item">
                <router-link class="nav-link" to="/page/child2">卡片2</router-link>
            </li>
            <li class="nav-item">
                <router-link class="nav-link" to="/page/child3">卡片3</router-link>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" @click.prevent="updatePath">切換到指定頁面</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" @click.prevent="beforePath">回到上一頁</a>
            </li>
        </ul>
    </div>
</template>

接著我們就可以在下面的 export 寫下我們定義的方法,並採用文件提供到的方法:

<script>
export default {
    data () {
        return {}
    },
    methods: {
        updatePath () {
            this.$router.push('/page/child2');
        },
        beforePath () {
            this.$router.back();
        }
    }
}
</script>

上面的 undatePath 是切換到指定頁面,我們可以採用文件內的 router.push() 這個方法,而 beforePath 是回到上一頁,我們一頁也可以採用文件內的 router.back() 這個方法
文件還有提供很多方法可以做使用,這裡就不多加贅述


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言