vue之路由跳转的3种方式

1.路由标签跳转

<router-link :to="{path, params, query}"></router-link>

<router-link :to="{name, params, query}"></router-link>

<router-link :to="/index/page1"></router-link>

　　path------------跳转路径( 例：path: '/index/page1' )

　　name------------跳转路由名称( 例：name: 'router name' )

2.函数操作（params方式传参）

// 对象写法
this.$router.push({
   name: 'router name',
   params: {
　　　　key: value
       ...
    }  
})
// 字符串写法
this.$router.push('/index/page1/params1/param2')

　　相应的跳转页接收参数格式如下：this.$route.params
3.函数操作（query方式传参）

// 对象写法
this.$router.push({
   name: 'router name',
   query: {
　　　　key: value
       ...
    }  
})
// 字符串写法
this.$router.push('/index/page1?param1=param1&param2=param2')

　　相应的跳转页接收参数格式如下：this.$route.query

注：2和3的区别在于，3的参数会以字符串拼接的形式（key=value）展示在地址栏。

　　2中，首先，显示上（/param1/param2...），其次，如果路由配置中没有指定参数名称，在当前页面刷新后通过this.$route.params获取不到对应的参数。

 

{ // 刷新页面后仍能取到参数值
  path：‘/index/:param1/:param2’,
  name: 'router name',
  component: 'component name',
  ...        
}

{ // 刷新页面后不能正常获取值
  path：‘/index’,
  name: 'router name',
  component: 'component name',
  ...        
}