vue地址栏输入路由跳转到首页_vue之路由跳转的3种方式

1.路由标签跳转

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',

...

}