Vue系列教程（20）- 参数传递（:to）

1. 引言

通过前面的章节，我们知道了嵌套路由的使用 ，有兴趣的同学可以参阅下：

• 《Vue系列教程（01）- 前端发展史》
• 《Vue系列教程（02）- Vue环境搭建、项目创建及运行》
• 《Vue系列教程（03）- Vue开发利器VsCode》
• 《Vue系列教程（04）- VsCode断点调试》
• 《Vue系列教程（05）- 基础知识快速补充（html、css、js）》
• 《Vue系列教程（06）- Vue调试神器（vue-devtools）》
• 《Vue系列教程（07）- Vue第一个程序（MVVM模式的引入）》
• 《Vue系列教程（08）- 基本语法》
• 《Vue系列教程（09）- 事件绑定》
• 《Vue系列教程（10）- Model数据内容双向绑定》
• 《Vue系列教程（11）- 组件详解》
• 《Vue系列教程（12）- Axios异步通信》
• 《Vue系列教程（13）- 计算属性（computed）》
• 《Vue系列教程（14）- 插槽（slot）》
• 《Vue系列教程（15）- 事件内容分发（$emit）》
• 《Vue系列教程（16）- 模块打包器（webpack）》
• 《Vue系列教程（17）- 路由（vue-router）》
• 《Vue系列教程（18）- 集成UI框架（ElementUI）》
• 《Vue系列教程（19）- 嵌套路由（ElementUI）》

本文继续衔接上一篇博客的内容，主要讲解页面间的携带内容跳转，本文以Main.vue（主页）携带id跳转至Profile.vue（个人信息页）为例子讲解。

2. 案例 2.1 路由配置定义路径参数别名

类似于SpringMVC，需要现在路由配置文件（index.js）里配置路径参数，代码如下（注意路径的:id）：

children: [
        {
          path: '/user/profile/:id',
          name: 'userProfile',
          component: UserProfile,
        }

2.2 传参

因为是有Main.vue跳转到Profile.vue页面的，所以要在Main.vue里定义传参格式（注意：:to里面的内容）：

	  
	  个人信息

2.3 接收参数

Profile.vue接收参数，代码如下：

   个人信息
   {{$route.params.id}}



  export default {
    name: "UserProfile"
  }

2.4 演示

运行程序npm run serve，效果如下： 入参改为2，刷新：

3. 小结

当然，在案例中也可以使用props来实现解耦，实现方式如下：

index.js文件内容：

{
    path: '/user/profile/:id',
    name: 'userProfile',
    component: UserProfile,
    props: true
}

Profile.vue文件内容：

   个人信息
   {{id}}



  export default {
    props:['id'],
    name: "UserProfile"
  }

运行结果一致，本文完！