Vue路由跳转的几种方式及解释说明

缺乏、安全感 2022-09-03 10:28 196阅读 0赞

## 一、router-link（声明式路由，在页面中调用） ##

在Vue中，router-link称为声明式路由，常放在页面中，:to绑定为跳转的目标地址，通过点击实现跳转，路由的跳转主要有两种形式，一种是通过name，另一种是path。  
**1.1 路由不带参数**

<router-link :to="{ name: 'word' }">路由name方式跳转首页</router-link>
          <router-link :to="{ path: '/word' }">路由path方式跳转首页</router-link>

**1.2 路由带参数跳转**  
路由参数的传递主要有两种方式一种是params，另一种是query，主要区别如下:

1. params传参的参数不会显示在跳转的URL中，query传参的参数会显示在URL中。
     2. params所传的参数通过this.$route.params.参数；获取，query所传的参数通过this.$route.query.参数；获取
     3. 因为params所传递的参数不显示在URl中，所以在路由跳转时推荐params方式进行传参
     4. 都不能传对象和着数组引用类型数据，只能传字符串类型数据

<router-link :to="{ name: 'home', params: { key: '1', value: '跳转' } }">路由name,params方式跳转首页</router-link>
         <router-link :to="{ name: 'home', query: { key: '1', value: '跳转' } }">路由name,query方式跳转首页</router-link>
         
         <router-link :to="{ path: '/home', params: { key: '1', value: '跳转' } }">路由path,params方式跳转首页</router-link>
         <router-link :to="{ path: '/home', query: { key: '1', value: '跳转' } }">路由path,query方式跳转首页</router-link>

## 二、this.$router.push() (在函数里面调用) ##

2.1不带参数跳转

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

2.2带参数跳转

<a-button type="primary" @click="goTo">路由name方式跳转</a-button>
      goTo() { 
        this.$router.push({  name: 'home', params: {  a: '1', b: '2' } });//推荐用params传参方式
        this.$router.push({  name: 'home', query: {  a: '1', b: '2' } });
      }

<a-button type="primary" @click="goTo">路由path方式跳转</a-button>
      goTo() { 
        this.$router.push({  path: '/home', params: {  a: '1', b: '2' } });//推荐用params传参方式
        this.$router.push({  path: '/home', query: {  a: '1', b: '2' } });
      }

## 三、this.$router.resolve()打开新窗口跳转 ##

**3.1通过path形式跳转**

goTo() { 
        let routeData = this.$router.resolve({ 
          path: '/home',
        });
        window.open(routeData.href, '_blank');
      }

**3.2通过params形式跳转**

goTo() { 
        let routeData = this.$router.resolve({ 
          name: 'home',
        });
        window.open(routeData.href, '_blank');
      }