Day34 - 自定义切换路由方法

在 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() 这个方法
文件还有提供很多方法可以做使用，这里就不多加赘述