vue-router编程式的导航 - 蓝蓝设计_UI设计公司

帝皇彩票官网

vue-router编程式的导航

2019-10-20 释然 前端及开发文章及欣赏

什么是编程式的导航
除了使用 <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.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务。

标签: vue-router编程式的导航

Powered by sitemap
迪士尼彩乐园 吉利彩票投注 上海11选5分布走势图 大象彩票登入 迪士尼彩乐园投注 pk10机器人 桔子彩票平台 贵州快3代理 迪士尼彩乐园开户 桔子彩票官网