3/20 $route与$router的区别

前面的话

Vue每日一练，巩固基础，不打烊！！！

解答

我们将着两个打印出来看看：

$route是路由信息对象： 它包括 path, params，hash,name等路由信息

• $route.path : 当前路由的路径
• $route.params: 是一个对象
• $ route.query: 对象，表示url查询参数。比如/user?user=1,则$route.query.user为1
• $route.hash: 当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串。
• $route.name: 当前路径名字

$router 是“路由实例”对象: 即 new VueRouter创建的实例，包括了路由的跳转方法，钩子函数等。

• $router.go(-1) // 跳转到上一次浏览的页面
• $router.replace(’/XXX’) // 跳转到指定的页面
• $router.push(’/XXX’)// 通过push进行跳转

$ router.push和$router.replace的区别：

• 使用push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。
• 使用replace方法不会向 history 添加新记录，而是替换掉当前的 history 记录，即当replace跳转到的网页后，‘后退’按钮不能查看之前的页面。