vuejs如何實現頁面跳轉

vuejs實現頁面跳躍的方法：1、使用「...」語句；2、使用「this .$router.push({path: '頁面url位址' })」語句。

本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

Vue路由實現頁面跳躍的兩種方式（router-link和JS）

1、透過  實作

 元件用於設定一個導航鏈接，切換不同HTML 內容

使用方法：

• 簡單寫法

<router-link to="demo2">demo2</router-link>

• #使用v-bind 的寫法

<router-link :to="&#39;demo2&#39;">demo2</router-link>

<!-- 也可以用{}包裹对应的path或name -->
<router-link :to="{ name: &#39;demo2&#39; }">demo2</router-link>

• 傳參的寫法

#

<router-link :to="{ name: &#39;demo2&#39;, params: { userId: 123 }}">demo2</router-link>

這裡傳參需要在 router.js 中對demo2 的路徑進行配置，在path 中demo2 後加入通配符: 和對應的userId

{
  path: '/demo2/:userId',
  name: 'demo2',
  component: demo2
  },

#配置完成後，頁面跳轉的結果就為/demo2/123

這裡的「123」就是上面的userId

##那麼，如何在新頁面中取得到傳過來的參數userId 呢？

在mounted 鉤子中使用this.$route.params.xx. 取得傳過來的參數，如下：

##

mounted () {
    alert(this.$route.params.userId)
}
// 弹出123

• 傳入位址鍵值對

<router-link :to="{ path: &#39;demo2&#39;, query: { plan: &#39;private&#39; }}">demo2</router-link>

頁面跳轉的結果為 

/demo2?plan=private

（注意這裡不用在

router.js 裡設定路徑）

在新頁面中取得到傳過來的位址鍵值對plan，可以在 

mounted 鉤子中使用this.$route.plan.xx. 取得傳過來的位址鍵值對，如下：

mounted () {
  alert(this.$route.query.plan)
}

// 弹出private

2、透過JS 實作---this.$router.push()

template 部分：

<button @click="toURL">跳转页面</button>

script 部分：

（注意這裡是router，上面是route）

• 簡單寫法

#

methods:{
  toURL(){
      this.$router.push({ path: '/demo2' })
  }
}

• 傳參的寫法

methods:{
  toURL(){
      this.$router.push({ name: 'demo2', params: { userId: 123 }})
  }
}

• 傳入位址鍵值對

methods:{
  toURL(){ 
     this.$router.push({ name: 'demo2', params: { userId: 123 }, query: { plan: 'private' } })
  }
}

相關推薦：《

vue.js教程》

以上是vuejs如何實現頁面跳轉的詳細內容。更多資訊請關注PHP中文網其他相關文章！