vue里route和router

“持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情”

啊!!!老是搞不清楚vue里route和router

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

this.$route：当前激活的路由的信息对象。每个对象都是局部的，可以获取当前路由的 path, name, params, query 等属性。这里不确定的时候可以打印出来看一下。一般都常使用的是path可以获取到route文件配置的路径 router 有两种导航方式 1.声明式导航 2.编程式导航

1. 声明式导航router-linkto指定跳转到哪里,它会被浏览器渲染成一个a标签

2. 编程式导航 语法 this.$router.push(要跳转的路径)

补充: 其中包含了很多属性和对象（比如 history 对象），任何页面也都可以调用其 push(), replace(), go() 等方法。

    push()方法会向 history 中添加一个记录，当点击浏览器的返回按钮时可以退回到前一个页面，当我们点击 时等同于调用了 this.$router.push()。

• this.$router.push() 方法的参数可以是一个字符串路径，或则是一个地址对象，例如：
• this.$router.push('home') this.$router.push({path: 'home'})

    也可以携带参数，但是要注意：如果提供了 path， params 会被忽略，例如：

    this.$router.push({path: 'home', params: { page: 2}}) 这里的params会被忽略

    同样的规则也适用于 router-link 的 to 属性

    可以使用以下几种方法：

• this.router.push({path: `/home/{page=2}``})
• this.$router.push({name: 'home', params: { page: 2}})
• this.$router.push({path: 'home', query: { page: 2}})

    这几种方法获取参数的方式：this.$route.params.page / this.$route.query.page