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¶m2=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', ... }