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传参不会发生刷新页面参数丢失的问题。