1、第一种就是我们很熟悉的直接在 router-link 里面 to 属性后接路径,或者是通过路由 name 属性绑定
<li>
<router-link :to="/" class="nav-link" >主页</router-link>
<router-link :to="{name : 'indexLink'}" class="nav-link" >主页</router-link>
</li>
2、绑定一个方法,通过方法触发
<template>
<div>
<h1>HOME</h1>
<button @click="goToMenu" class="btn">返回上一次浏览页面</button>
</div>
</template>
<script>
export default({
methods: {
goToMenu(){
// this指代的是对象 $router是固定方法,go(-1)则是上次浏览页面
this.$router.go(-1)
}
}
})
</script>
3、指定跳转的地址:通过replace 方法.通过 replace(),指定需要跳转到的路由的 path 路径
<template>
<div>
<h1>HOME</h1>
<button @click="goToMenu" class="btn">点击跳转</button>
</div>
</template>
<script>
export default({
methods: {
goToMenu(){
this.$router.replace('/menu')
}
}
})
</script>
4、跳转到指定的路由名字下:通过 replace(),指定需要跳转的路由的 name 属性 {name:'menuLink'}
template>
<div>
<h1>HOME</h1>
<button @click="goToMenu" class="btn">点击跳转</button>
</div>
</template>
<script>
export default({
methods: {
goToMenu(){
this.$router.replace({name:'menuLink'})
}
}
})
</script>
5、最常用的,push 方法:该方法和replace方法一样,即可 通过路由地址跳转,也可通过路由名字跳转
<template>
<div>
<h1>HOME</h1>
<button @click="goToMenu" class="btn">点击跳转</button>
</div>
</template>
<script>
export default({
methods: {
goToMenu(){
this.$router.push('/menu')
this.$router.push({name:'menuLink'})
}
}
})
</script>
ps:既然 replace 和 push 都能进行路由的 path路径、name属性 跳转,name他们的区别在哪里?
replace:通过replace 跳转的路由,不会存在在浏览器的 历史记录里,只会将需要跳转的路由替换当前的路由
push:通过push 跳转的路由,存在于浏览器的历史记录中,可以通过 浏览器的前进后退按钮。回到之前会之后的路由