vue 路由跳转方式

一、使用标签跳转

1.1 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通过name形式跳转

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

 四：使用this.$router.replace()跳转（不会留下 history 记录,返回是返回上上级页面）

//导航后不会留下 history 记录。即使点击返回按钮也不会回到这个页面。
this.$router.replace({path:'/goods/add'});
 
//带参数方式与push相同（获取参数也一样）
this.$router.replace({path:'/goods/add', query: {selected: "3"}});
 
//push方法也可以传replace
//push在加上replace: true后，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
 this.$router.push({path: '/home', replace: true})

五：使用this.$router.go(n)方式跳转

//跳转到上一页
this.$router.go(-1)
//跳转到上上页
 this.$router.go(-2)

 tip:推荐使用最常用方法二，四