文字加代码搞懂vue中$route和$router区别

一、区别

• $router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
• $route为当前router跳转对象里面可以获取name、path、query、params等

看图示：
打印出两者

红框中就可以看出

• $router中含有history属性，可以实现路由跳转
• $route中含有query,params属性，跳转路由中传递参数就靠这两个

二、$router举例

点击首页跳转到/home

三、$route举例——跳转路由传递参数

1.$route中params属性传递参数

下图重点看红框

• 将App.vue中userId’zhangsan’传入到User.vue的过程
• 代码执行流程也是如此

显示url效果

将lisi传递过来

2.$router中query属性传递参数

重点看红框

• 从上到下是代码执行顺序

显示的url效果

将name传递过来

3.params和query属性传递参数的区别

params的类型

• 配置路由格式:/user/:id
• 传递方式:在path后跟上对应的值
• 传递后形成的路径：/user/123,/user/abc

query的类型

• 配置路由格式:/user，普通配置
• 传递方式:对象中使用query的key作为传递方式
• 传递后形成的路径：/user?id=123,/user?id=abc

4.注意

url中/后面为path,?后面为query

• url格式：协议://主机:端口/路径?查询(query)
• 英文格式：scheme://host:port/path?query#fregment