路由跳轉幾種方式

<template>
    <div class="wrapper">
      <router-link :to="{name:'Table'}">路由跳轉1</router-link>
      
<!--  假如根路由是http://localhost:8080/#/beauty，跳轉之后是http://localhost:8080/#/,table不顯示在路由上面，但是跳轉的是table頁面-->
      
      <router-link :to="{path:'/table'}">路由跳轉2</router-link>
      
<!--  假如根路由是http://localhost:8080/#/beauty，跳轉之后是http://localhost:8080/#/table,table顯示在路由上面，跳轉的是table頁面-->
      
<!--  name,path都行, 建議用name；注意：router-link中鏈接如果是'/'開始就是從根路由開始，如果開始不帶'/'，則從當前路由開始 -->
      
      <router-link :to="{name:'Table', params: {id:1}}">路由跳轉3</router-link>
      
<!--  假如根路由是http://localhost:8080/#/beauty，跳轉之后是http://localhost:8080/#/table,table顯示在路由上面，跳轉的是table頁面,但是刷新之后就獲取不到參數id-->
<!--  params傳參數 (類似post),路由配置 path: "/table/:id" 或者 path: "/table:id" ,http://localhost:8080/#/table/1, 不配置path ,第一次可請求,刷新頁面id會消失
      配置path,（在路由文件對應的頁面去配置）刷新頁面id會保留,html 取參 $route.params.id    script 取參 this.$route.params.id -->
      
      <router-link :to="{name:'Form', query: {id:1}}"> 路由跳轉4</router-link>
      
<!--  query傳參數 (類似get,url后面會顯示參數),路由可不配置,刷新頁面id依然存在，html 取參 $route.query.id,script 取參 this.$route.query.id -->
      
      <p @click="goRouter5">路由跳轉5</p>
      <p @click="goRouter6">路由跳轉6</p>
      <p @click="goRouter7">路由跳轉7</p>
      <p @click="goRouter8">路由跳轉8</p>
      <p @click="goRouter9">路由跳轉9</p>
    </div>
</template>
<script>
 export default{
   data(){
     return{

     }
   },
   methods:{
     goRouter5(){
       this.$router.push({name:'Table',query: {id:'1'}});
       // html 取參  $route.query.id,  script 取參  this.$route.query.id
     },
     goRouter6(){
       this.$router.push({path:'/table',query: {id:'2'}});
       // html 取參  $route.query.id,  script 取參  this.$route.query.id
     },
     goRouter7(){
       this.$router.push({name:'Table',params: {id:'1'}})  // 只能用 name
       // 路由配置 path: "/table/:id" 或者 path: "/table:id" ,不配置path ,第一次可請求,刷新頁面id會消失,配置path,刷新頁面id會保留
       // html 取參 $route.params.id,  script 取參 this.$route.params.id
     },
     goRouter8(){
       this.$router.replace({path:'/table',query: {id:'2'}}); // 用法同push
     },
     goRouter9(){
       this.$router.go(1); //向前或者向后跳轉n個頁面，n可為正整數或負整數
     }
   }
 }
//小結：
 // this.$router.push 跳轉到指定url路徑，並想history棧中添加一個記錄，點擊后退會返回到上一個頁面
 // this.$router.replace 跳轉到指定url路徑，但是history棧中不會有記錄，點擊返回會跳轉到上上個頁面 (就是直接替換了當前頁面)
 // this.$router.go(n) 向前或者向后跳轉n個頁面，n可為正整數或負整數
</script>
<style>

</style>



參考鏈接：https://blog.csdn.net/zhangkeke_/article/details/79730597