技術標籤：Vuevue

Vue中的兩種路由方式

• 給定初始頁面
• • One頁面
• 一、query+path
• 二、params+name
• 總結

給定初始頁面

One頁面

一、query+path

傳參形式為：url?id=1001&name=Brave-Y

<template>
  <div>我是one頁面，點選跳轉<button @click="gotwo">去two</button></div>
</template>
<script>
export default {
  name:
 
 'one',
  methods: {
    gotwo () {
    // 1.query+path
    // url?id=1001&name=Brave-Y
      this.$router.push({
        path: '/two',
        query: {
          id: 1001,
          name: 'Brave-Y'
        }
      })
    }
  }
}
</script>

二、params+name

位址列無引數

<template>
  <div>我是one頁面，點選跳轉<
 
button @click="gotwo">去two</button></div>
</template>
<script>
export default {
  name: 'one',
  methods: {
    gotwo () {
      // 2.params+name
      this.$router.push({
        name: 'two',
        params: {
          id: 1001,
          name: 'Brave-Y'
        }
      }
 
)
    }
  }
}
</script>

在路由檔案中給T模組加一個name，可以給路由繫結值

  {
    name: 'two',
    path: '/two',
    // path: '/two/:id',
    component: Two
  },

總結

對比看一下兩種頁面跳轉時的位址列引數，使用query+path路由方式，在位址列時可以看到請求引數，這一點和Get請求很類似，如果使用params+name路由方式，並且不在路由檔案中繫結值，在位址列上也不會有請求引數