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/:param1/:param2’,
  name: 'router name',
  component: 'component name',
  ...        
}

 

  

 

上一篇:存储过程的调试


下一篇:关于Spring的学习总结(三)