通常情况下 如果只是已经写好功能的页面 且通常不需要再发送请求拿数据就可以直接使用这个
不带参数
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name
当然也有需要携带参数的场合
params 或者query
<router-link :to="{name:'home', params: {id:1}}">
通常情况下 分为两个两种情况
你说他们俩长得也不像吧,可这用法实在是太类似了
这里我们只描述vue路由的情况 这两兄弟 在很多地方都有很大的区别 但是本质都是脱胎于http的两个参数携带方式 同样的传递和发起的时候也是这两个携带方式 各有作用各有千秋
我们首先用router-link
来写
<router-link :to="{ A: 'xxx', query: { xx:'xxx' }}" />
<router-link :to="{ A: 'xxx', parmas: { xx:'xxx' }}" />
两种方式也对应两种不同的路由写法并不是都套上去都完事
query
:
<router-link :to="{ name: 'W', query: { id:'1234',age:'12' }}"/>
<router-link :to="{ path: '/W', query: { id:'1234',age:'12' }}"/>
使用query的话两种方式都是可用的
parmas
:
<router-link :to="{ name: 'W', params: { id:'1234',age:'12' }}"/>
这里只能用name
不能用path
,不然会直接无视掉params
中的内容
同样的 你使用了<router-link>的方式跳转也比较接收他们的规则 比如
如果你在<router-link>中绑定了规则 比如点击等等
哪必须使用@click.native这种方式 不然是不会执行里面的操作的 当然 这个方法本来就有问题 我个人就上他们吃瘪了 所以我个人非常不推荐使用<router-link>的方式来进行跳转
我们通常使用的是函数的方式
this.$router.push() (函数里面调用)
不携带参数
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
携带参数
query
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
但是貌似使用这种方式激活的点击事件不怎么灵 因为我自己的项目的实践中使用到了 this.$router.push({path:'/home',query: {id:'1'}}) 但是这样的情况下参数并没有传递过去
所以我还是只推荐只用name而不使用path
params
this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
这里只能使用到name
同样的 传递了参数 要如何引用
一般来说就是
this.route.query.xxx 或者 this.route.params.xxx
这样来调用传过来的参数
同样的两种不同的方式也对应不用的url
在name的模式下基于name设置 直接把path添加到url中
{
path: '/hhhhhhh', //这里可以任意
name: 'W', //这里必须是W
component: W
}
然后就把path
匹配添加到url
上去
http://localhost:8080/#/hhhhhhh?id=1234&age=12
但是path模式不拐弯抹角
{
path: '/W', //这里必须是W
name: 'hhhhhhhh', //这里任意
component: W
}
直接基于path模式传递
url:http://localhost:8080/#/W?id=1234&age=12
{
path:'/W/:id/:age',
name:'W',
component:W
}
这里的name
与上面router-link
中的name
保持一致
url
就取决于这个path
的写法 http://localhost:8080/#/W/1234/12
注意,path
里面的/w
可以任意写,写成/hhhhh
也可以 但是!/:id
和/:age
不能省略,且不能改名字
不写的话,第一次点击可以实现组件跳转 且可以通过this.$route.parmas.id
获取到传过来的id
值,但如果 刷新页面,传过来的id
值和age
值就会丢失
从这也能看出params比query严格
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。