开始学 Vue Router 的时候,
最常用到的便是使用路由组件 <router-link> :
<router-link to="..."></router-link>
然后使用 <router-view> 作为路由内容的输出:
<router-view></router-view>
然而除了使用 <router-link> 之外,Vue Router 还为我们提供了一些方法:
router.push (location, onComplete?, onAbort?)
router.replace (location, onComplete?, onAbort?)
router.go(n)
router.push
跳转到对应路由页面,可通过浏览器的后退按钮后退到上一层。
router.replace
跳转到对应路由页面并替换掉原来的路径,不可后退至上一层
router.go(n)
跳转到第 n 层,如果 n 是负数,则后退 n 层,正数则前进 n 层。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>编程式导航</title>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
<style>
button,
.router-link{
padding: 10px 15px;
border: none;
outline: none;
font-size: 20px;
color: #fff;
/*background: linear-gradient(to right, blue, red, green);*/
background-color: #000;
}
</style>
</head>
<body>
<div id="app">
<!--最初的 router-link 模式-->
<router-link class="router-link" to="/path/RouterLink">原始路由</router-link>
<!--使用 router.push 方法-->
<button type="button" οnclick="routerPush()">router.push 方法</button>
<!--使用 router.replace 方法-->
<button type="button" οnclick="routerReplace()">router.replace 方法</button>
<!--使用 router.go 方法-->
<button type="button" οnclick="routerGo()">router.go 方法</button>
<router-view></router-view>
</div>
<script>
/**
* 创建一个路由组件 用于输出内容
*/
const view = {
template: "<div>" +
"<h1>我点击的是 {{$route.params.msg}}</h1>" +
"</div>"
}
/**
* 定义路由
*/
const routes = [
{
path: '/path/:msg',
component: view
}
]
/**
* 创建路由实例
*/
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount("#app")
/**
* 使用 router.push 替换 <router-link to="xxx"></router-link>
* 可点击浏览器后退按钮后退至上一步
*/
function routerPush() {
router.push({
path: "/path/routerPush"
})
}
/**
* 使用 router.replace 替换 <router-link to="xxx"></router-link>
* 不可后退
*/
function routerReplace() {
router.replace({
path: "/path/routerReplace"
})
}
/**
* router.go(n),接收一个整数,如果为正数则 前进 n 步,负则后退 n 步
*/
function routerGo() {
router.go(-1)
}
</script>
</body>
</html>
同时,也可以在Vue实例里面调用,例如:
const app = new Vue({
router,
methods:{
vueFn: function () {
this.$router.push({
path: "/path/routerPush"
})
}
}
}).$mount("#app")
2018-07-13
link_vue-router学习