vue2路由vue3路由相同与不同

在Vue中,使用router-link标签进行页面的跳转,其实他在编译过程中就转化为了传统的a标签,to的指向就是href链接,但是在传统a标签中,传递参数几乎是非常麻烦的事,但是vue很轻松的把这些做到了。

Vue2和Vue3的传递参数方式是一样的,下面依次介绍,

第一种是直接使用?拼接比如 to=".index"?age=18&sex="male"  浏览器地址栏会直接显示这个网址。

第二种是使用query传参,比如 to={path:"/index",query:{name:"cat",age:18}},query传参会和上面一样,直接在地址栏上显示,就是 /index?name="cat"&age=18,

第三种是params传参,比如 to={name:"index",params:{name:"dog",num:10}},不过这种传参方式不会在浏览器地址栏显示,还有一点是,params传参,只能使用name属性,如果使用path,参数会被忽略掉

还有编程式路由导航,他使用vue中router中push方法和replace方法

vue2和3中使用this.$router.push({name:"index",params:{age:18,name:"cat"}})或者直接拼接也可以

his.$router.push(`/index/${age}/${name}`),replace方法和push类似,这里就不赘述

但是我们如何取到传过来的参数呢?
vue2中使用$route.query.name 如果你使用query传参的话,如果你使用params的话,就是$route.params.name,  

vue3中要先引入useRoute useRouter,然后使用一个变量去初始化他,比如 route=useRoute()

router=useRouter(), router中有push、replace方法,而我们想要接受传过来的参数就需要使用route,如果使用query传参 route.query中就包含了你所传的参数,使用params传的话,把query替换成params就行了。

当我们成功跳转一个页面时,你传了一个关键参数id,但是当你刷新页面时,发现参数丢失了,这时候需要在route文件夹下index.js/ts 配置path 比如 index/:id 这样再刷新是就不会丢失了,这种情况仅适用于params传参,query传参不会发生刷新页面参数丢失的问题。

猜你喜欢

转载自blog.csdn.net/qq_45662523/article/details/126550560