vue笔记 (十三) vue-router (3):嵌套路由、路由参数传递与获取、$router和$route区别

嵌套路由

嵌套路由是一个很常见的功能，比如在 home 页面中，我们希望通过 /home/news 和 /home/message 访问一些内容。一个路径映射一个组件，访问这两个路径也会分别渲染两个组件。

路径和组件的关系如下:

实现嵌套路由有两个步骤：

1.创建对应的子组件，并且在路由映射中配置对应的子路由

配置路由：

2.在组件内部使用标签

显示效果：

路由参数传递与获取

参数传递

传递参数主要有两种类型: params 和 query

params的类型:

• 配置路由格式：/router/:id
• 传递的方式：在 path 后面跟上对应的值
• 传递后形成的路径：/router/123，/router/abc

query的类型：

• 配置路由格式：/router，也就是普通配置
• 传递的方式：对象中使用 query 的 key 作为传递方式
• 传递后形成的路径：/router?id=123，/router?id=abc

如何使用它们呢？也有两种方式：的方式和通过javascript代码的方式。

router-link的方式：

首先配置路由：

在router-link标签中分别做如下修改：

形成的URL对比：

javascript代码的方式:

参数获取

获取参数是通过$route对象来获取的，在使用了vue-router的应用中，路由对象会被注入每个组件中，赋值为this.$route,并且当路由切换时，路由对象会被更新。

通过$route获取的信息如下:

$router和$route的区别

vue源码截图：

从源码可以看出$router和$route是被添加到vue的原型中的，所以我们在全局都可以用。不同的是$router是我们在/router/index.js中创建的一个VueRouter 实例(如下图)；而$route则是不固定的。

• $router 是一个VueRouter 实例，想要导航到不同 URL，则使用 $router.push 方法
• $route 指的是当前被激活(处于活跃状态)的路由对象，比如下图例子中通过router-link进入到user组件，那么此时user组件就处于活跃状态(被激活)，这时$route获取到的就是user这个组件里的路由信息，比如 name、path、query、params 等