P13.11-VueRouter路由$route和$router区别

P13.11-VueRouter路由$route和$router区别

1.概述

$route和$router区别总结

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

2.$route和$router区别

2.1.查看router对象的来龙去脉

在user.vue中通过按钮输出router对象和main.js中打印import router from ‘./router’ 导入indexjs文件中创建的对象，发现他们是同一个对象，都是index.js文件中创建的router对象。

• 在user.vue中打印router对象
  
• 在main.js文件中打印router对象
  
• 对比两个地方打印的router是同一个对象
  
• 查看router对象源文件
  
  

2.2.查看route对象的来龙去脉

• 在User.vue中打印route
  
• 查看route对象

route对象中显示当前活跃路由组件中的数据