路由跳转几种方式

<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