vue中的路由跳转方法，详细（vue路由跳转）

痛定思痛。 2023-10-02 23:42 19阅读 0赞

#### **简述：**Vue路由可以帮助你在单页应用中管理应用的不同页面和页面间的跳转，通过Vue路由，你可以实现页面的动态切换和无刷新加载，提升用户体验和页面性能，今天就来分享下Vue中路由和页面之间的跳方式。 ####

#### **一、<router-link/>** ####

**tips：<router-link/>通过to属性和path和name进行跳转，并进行参数传递；**

**1、无参数跳转，可通过path和name跳转；**

eg: 
    
    <router-link to="/about">About</router-link >//to不带冒号
    
    <router-link :to="{ path:'/about' }">About</router-link>//:to带冒号
    
    <router-link :to="{ name: 'about' }">About</router-link>//:to带冒号

**2、有参数跳转，同样可通过path和name跳转；**

eg1:
    
    <router-link :to="{name:'home', query: {id:1}}">

**// query传参数 (类似get，url后面会显示参数)；  
// html 取参 $route.query.id // script 取参 this.$route.query.id；**

eg2:
    
    <router-link :to="{name:'home', params: {id:1}}">

**// params传参数，类似post，刷新页面id会消失，路由配置 path: "/home/:id" 或者 path: "/home:id"；  
// html 取参 $route.params.id // script 取参 this.$route.params.id；**

#### query传参和params传参的区别？ ####

**1、query传参刷新页面数据不会丢失，而params传参刷新页面数据会丢失；**

**2、query 可以通过path和name传参，而 params只能使用name传参；**

**3、query传递的参数会显示在地址栏中，而params传参不会；**

**4、params可以搭配动态路由传参，动态传参的数据会显示在地址栏中，且刷新页面不会消失，而query不可以；**

#### **二、this.$router.push()** ####

**tips：this.$router.push()跳转到相应页面，但这个方法会向history栈添加一个记录，点击会跳转到相应页面；**

eg1:
    //不带参数
    this.$router.push("/about") 
    //带参数 query传参
    this.$router.push({path: 'about', query: {account: this.account}})
    // 接收参数
    this.account = this.$route.query.account
    
    //行内跳转方式(同样可以传参)：
    @click="$router.push('/about')"
    
    
    eg2:
    //同样也可以通过params传参，可以搭配动态路由使用

#### **三、this.$router.replace()** ####

**tips：this.$router.replace()跳转到相应页面，这个方法不会向history栈添加一个记录，点击后会返回到上上个页面；**

eg:
    //当前页面路由信息不会被记录，使用时方法同上
    this.$router.replace("/about");

#### **四、this.$router.go()** ####

**tips：this.$router.go()跳转n个页面，n为正数向前跳转n个页面，负数后退n个页面；**

eg:
    
    this.$router.go(-1);//返回上一个页面
    
    this.$router.go(-2);//返回上一个的上一个页面
    
    this.$router.go(0);//可以用来刷新页面

####  ####

#### **五、this.$router.back()** ####

**tips：this.$router.back()用来返回上一层页面，只能返回一层；**

eg:
    
    this.$router.back(-1);//返回上一个页面,原页面的路由参数不会消失

#### **六、<a/>** ####

**tips：超链接作用，可以跳转网页，需要使用target属性控制是在当前页面显示还是在新页面中显示，a标签可以嵌套任何标签，除了a标签自己，即a不能套a；**

eg:
    //通过a标签跳转vue官网
    <a href="https://vuejs.bootcss.com/guide/" target="_blank">vue.js</a>
    
    //_blank表示跳到新页面打开，打开一个新窗口
    //_self表示当前页面打开链接
    //_parent表示在父集框架中打开
    //_top表示在整个窗口中打开
    //framename表示在指定的框架中打开

**补充：****获取参数的时候是$route（$route是用来获取路由信息的），而不是$router（$ router是用来操作路由的），然后以上都可以写成行内跳转方式，例如@click="$router.back(-1)" 。**