一. 路由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'})