vue中 $router 和 $route 的区别

区别:

this.$route:当前激活的路由的信息对象。每个对象都是局部的,可以获取当前URL解析得到的信息,还有URL匹配到的路由记录,包含当前路由的 path, name, params, query 等属性。

this.$router:全局的 router 实例。通过 vue 根实例中注入 router 实例,然后再注入到每个子组件,从而让整个应用都有路由功能。其中包含了很多属性和对象(比如 history 对象),任何页面也都可以调用其 push(), replace(), go() 等方法。

可以将$router理解为一个容器去管理了一组$route,而$route是进行了当前URL和组件的映射。

编程式&声明式路由跳转:

声明式:使用 router-link 组件来导航,通过传入 to 属性指定链接(router-link 默认会被渲染成一个a标签)。当需要在一个页面中嵌套子路由,并且页面不跳转的时候,只需要将子页面渲染在 router-view 里面。

编程式:

1. 定义两个路由跳转的单 .vue 组件

2. 导入 vue, vue-router,并定义路由,每个路由包含一个 component 属性,这个属性映射一个组件  ---  router.js

3. 创建 router 实例,并传递 routes 配置  ---  router.js

4. 在 vue 根实例中注入路由,这样就可以在其他任何组件中访问路由了  ---  main.js

猜你喜欢

转载自blog.csdn.net/qinqinzqq/article/details/126283389