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'})
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容