2019-10-20 seo达人
什么是编程式的导航
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
router.push(location, onComplete?, onAbort?)
注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
HTML代码
<p @click="$router.push('/test/emitView')">跳转1</p>
<p @click="$router.push({path: '/test/propsView'})">path: '/test/propsView'</p>
<p @click="test">带参数的跳转</p>
<p @click="test1">提供了path，params会被忽略</p>
<p @click="$router.push({path: /test/propsView/${userId}})">
url变为/test/propsView/123
</p>
<p @click="$router.push({path: '/test/propsView', query: {plan: 'private'}})">
带参数的url变为/test/propsView?plan=private
</p>
Script中代码
test () {
this.$router.push({
name: 'routerView',
params: {userId: this.userId, test: 333},
})
console.log(this.$route)
console.log(this.$route.params)
},
test1 () {
this.$router.push({ // 如果提供了 path，params 会被忽略
path: 'routerView',
params: {userId: this.userId, test: 333},
})
console.log(this.$route)
console.log(this.$route.params)
},
router.replace(location, onComplete?, onAbort?)
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
router.go(n)
// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)
// 后退一步记录，等同于 history.back()
router.go(-1)
// 如果 history 记录不够用，则无反应
router.go(-100)
router.go(100)
router.back()
在浏览器记录中后退一步
router.forward()
在浏览器记录中前进一步
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。