Vueページジャンプ方式及びパスまとめ

ルーティング構成

//      routerindex.js  

import Vue from 'vue'
import Router from 'vue-router'
import UserManager from '@/components/UserManager'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/userManager',
      name: 'userManager',
      component: UserManager
    }
  ]
})

1.ラベルジャンプ

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

ジャンプ時伝参

//    
 path: '/userManager/:id',  
 
 //       this.id       
<router-link :to="'/userManager/' + this.id"> <router-link/>


//    
this.$route.params.id

2.イベントジャンプ

methods: {
  goUserManager() {
    this.$router.push({ path:'/userManager'})
  }
}

query伝参

getリクエストに相当し、ページジャンプ時にパラメータがアドレスバーに表示されます

//     
this.$router.push({ 
    path:'/userManager',
    query: {
        id:this.id
    }
})

//    
this.$route.query.id

params伝参

postリクエストに相当し、ページジャンプ時にパラメータはアドレスバーに表示されません.

//     
this.$router.push({ 
    path:'/userManager',
    name:'userManager', 
    //params        name      ；        name
    params: {
        id:this.id
    }
})

//    
this.$route.params.id

paramsを使用して参照すると、ページパラメータのリフレッシュは

消えます.
パスに/:idを追加するルーティングを構成するには、パスが必要なパラメータ名に対応します.

//    
 path: '/userManager/:id',

注意:パラメータはrouterで、受信パラメータはrouteです.