手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

vue-router編程式的導(dǎo)航

2019-10-20    seo達(dá)人

什么是編程式的導(dǎo)航

除了使用 <router-link> 創(chuàng)建 a 標(biāo)簽來定義導(dǎo)航鏈接,我們還可以借助 router 的實(shí)例方法,通過編寫代碼來實(shí)現(xiàn)。



router.push(location, onComplete?, onAbort?)

注意:在 Vue 實(shí)例內(nèi)部,你可以通過 $router 訪問路由實(shí)例。因此你可以調(diào)用 this.$router.push。



想要導(dǎo)航到不同的 URL,則使用 router.push 方法。這個(gè)方法會(huì)向 history 棧添加一個(gè)新的記錄,所以,當(dāng)用戶點(diǎn)擊瀏覽器后退按鈕時(shí),則回到之前的 URL。



HTML代碼



<p @click="$router.push('/test/emitView')">跳轉(zhuǎn)1</p>

<p @click="$router.push({path: '/test/propsView'})">path: '/test/propsView'</p>

<p @click="test">帶參數(shù)的跳轉(zhuǎn)</p>

<p @click="test1">提供了path,params會(huì)被忽略</p>

<p @click="$router.push({path: /test/propsView/${userId}})">

    url變?yōu)?test/propsView/123

</p>

<p @click="$router.push({path: '/test/propsView', query: {plan: 'private'}})">

    帶參數(shù)的url變?yōu)?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 會(huì)被忽略

        path: 'routerView',

        params: {userId: this.userId, test: 333},

    })

    console.log(this.$route)

    console.log(this.$route.params)

},

router.replace(location, onComplete?, onAbort?)

跟 router.push 很像,唯一的不同就是,它不會(huì)向 history 添加新記錄,而是跟它的方法名一樣 —— 替換掉當(dāng)前的 history 記錄。



router.go(n)

// 在瀏覽器記錄中前進(jìn)一步,等同于 history.forward()

router.go(1)

 

// 后退一步記錄,等同于 history.back()

router.go(-1)

 

// 如果 history 記錄不夠用,則無(wú)反應(yīng)

router.go(-100)

router.go(100)

router.back()

在瀏覽器記錄中后退一步



router.forward()

在瀏覽器記錄中前進(jìn)一步


藍(lán)藍(lán)設(shè)計(jì)www.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì)  cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制  用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)。

分享本文至:

日歷

鏈接

個(gè)人資料

存檔