vueルーティングジャンプの4つの方法を詳しく理解する(転載)

テキストリンク:https://www.jb51.net/article/160401.htm
1、router-link 

1.     
  
 //name,path  ,    name 
//   ：router-link      '/'          ，      '/'，        。


 2.   
  
// params    (  post)
//      path: "/home/:id"    path: "/home:id" 
//    path ,      ,    id   
//   path,    id   
// html    $route.params.id
// script    this.$route.params.id
 
// query    (  get,url       )
//       
// html    $route.query.id
// script    this.$route.query.id

 
2、this.$router.push()(関数内呼び出し)

1.     
 this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})


2. query   
 this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// html    $route.query.id
// script    this.$route.query.id


3. params  
 this.$router.push({name:'home',params: {id:'1'}}) //     name
  
//      path: "/home/:id"    path: "/home:id" ,
//    path ,      ,    id   
//   path,    id   
// html    $route.params.id
// script    this.$route.params.id
4. query params  
query   get,        url       ,  ?id=1,           ,        params    id  
 params   post,        url         ,       id    

 
3、this.$router.义齿
 
4、this.$router.go(n)()nページを前または後ろにジャンプし、nは正の整数または負の整数であってもよい
 
ps:区別this.$router.push
指定したurlパスにジャンプし、historyスタックにレコードを追加したい場合は、クリックして戻ると前のページに戻ります.this.$router.replace
指定したurlパスにジャンプしますが、historyスタックには記録されません.クリックすると、前のページにジャンプします(現在のページが直接置換されます).this.$router.go(n)
前または後ろにnページジャンプし、nは正の整数または負の整数であってもよい
 
 
vueコンポーネントレベルルーティングフック関数の紹介と実際の応用