vue router总结 $router和$route及router与 router与route区

Vue Router中的$router和$route及router与route的区别详解

Vue Router是Vue.js的一个插件，用于构建单页面应用中的路由管理。在Vue Router中，有两个重要的对象：$router和$route，以及router与route的区别。本文将详细介绍这两个对象及其区别。

一、$router和$route的区别

1. $router

$router是VueRouter的实例方法，主要用于导航到不同的url。通过this.$router.push方法，可以向history中添加一条记录。当点击浏览器回退按钮或使用this.$router.back()方法时，可以回退到之前的url。

2. $route

$route相当于当前激活的路由对象，包含了当前url得到的数据。可以从对象里获取一些数据，如name、path等。

二、路由跳转方式

路由跳转分为声明式和编程式两种方式。

1. 声明式

声明式路由跳转主要通过组件实现。通过绑定to属性指定目标路由，点击链接即可实现路由跳转。当在一个页面嵌套子路由，并且不跳转页面时，子页面会渲染在的地方。

2. 编程式

编程式路由跳转通过router.push方法实现。可以传入字符串、对象、命名的路由或带查询参数的对象作为参数。需要注意的是，如果提供了path，那么params和query的配置会被忽略。

三、path:'name'和path:'/name'的区别

在编程式路由跳转中，path的值可以是带参数或不带参数的字符串。如果加'/'，则会被当作根目录；否则，当前的路径会嵌套在之前的路径中。例如，如果当前路径是home，使用this.$router.push({path:'name'})将跳转到/home/name路径，而使用this.$router.push({path:'/name'})将跳转到/name路径。

Vue Router中的核心对象：深入理解$route和$router对象及其区别

在Vue应用中，Vue Router扮演着一个至关重要的角色，而其中的两个核心对象——$route和$router更是我们需要深入了解的关键。今天，让我们一起走进Vue Router的世界，深入理解这两个对象及其区别。

让我们来看看$route对象。它是一个包含路由信息的对象，其中包含了许多关键属性，帮助我们获取当前路由的状态和信息。例如：

$route.query：一个键值对对象，表示URL查询参数。比如路径/foo?user=1中，我们可以通过$route.query.user获取到值1。如果没有查询参数，则是一个空对象。

$route.hash：表示当前路由的哈希值（不带），如果没有哈希值则为空字符串。这常常用于锚点导航。

$route.fullPath：完成后的URL，包含查询参数和哈希的完整路径。

$route.matched：数组形式，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。

$route.name：当前路径的名字。

$route.meta：路由元信息。

接下来是$router对象。它是全局路由的实例，是router构造方法的实例。它提供了一系列的方法来进行路由控制和管理。其中，push方法是最常用的方法之一。通过push方法，我们可以进行路由跳转，类似于标签的功能。push方法可以接受字符串、对象或命名的路由作为参数，并可以携带查询参数。值得注意的是，push方法的跳转会向history栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。除了push方法，$router对象还提供了go方法和replace方法来进行路由导航。

在配置路由时，path的设定有时以'/'开头，有时不加。以'/'开头的path会被当作根路径，不会一直嵌套之前的路径。

Vue Router的$route和$router对象在Vue应用中扮演着重要的角色。深入理解这两个对象及其区别，能够帮助我们更好地使用Vue Router进行路由管理和控制。希望这篇文章能对您有所启发，如果您有任何疑问或需要进一步的解释，请随时与我联系。也欢迎大家转载分享，请注明出处，感谢支持！

（注：以上内容纯属虚构，如有雷同纯属巧合。）接下来是正文内容结束标志——

接下来是您的代码部分：

```javascript

// 渲染主体内容到页面

cambrian.render('body');

```