Vue 路由name属性及跳转方法

一. 路由name属性

1. 可以在声明路由路径时，给路由起名字

2. 在main.js当中，附加name:"homeLink"。

3. 在Header.vue导航栏的组件中，跳转标签router-link中的to属性，改为属性绑定形式:to="{name:'homeLink'}"，即可正常实现跳转。

二. 路由跳转方法

1. router-link通过to标签进行跳转

2. 通过对应方法点击button进行跳转

(1) 跳转到上一次浏览的页面this.$router.go(-1)

eg:给Home组件中的button标签添加goToMenu点击事件，点击Let's order!按钮，即可跳转到上一次浏览的页面

<template>
    <div>
        <h1>home</h1>
        <button @click="goToMenu" class="btn btn-success">
            Let's order!
        </button>
    </div>
</template>
<script>
export default {
    methods:{
        goToMenu(){
            //跳转到上一次浏览的页面
            this.$router.go(-1)
        }
    }
}
</script>

(2) 指定跳转的地址

        this.$router.replace('/menu')

(3) 指定跳转路由的名字下

        this.$router.replace({name:'menuLink'})

(4) 通过push进行跳转

        this.$router.push('/menu')
        this.$router.push({name:'menuLink'})