Vue知识整理，专题之路由：6、路由传参-使用params方式传递路由参数

目录

一、前言

二、使用params方式传递路由参数

1、路由实例简约版

2、使用params方式传递路由参数

步骤1：修改路由匹配规则 routes 里面的 path属性值

步骤2：在连接跳转处，修改 router-link的 to属性值

步骤3：组件内部拿到这个参数id

步骤4：把 id的值 放到 h1标签里面

3、使用 params方式传递多个参数

步骤1：修改 routes路由匹配规则 里面的 path属性值

步骤2：修改 router-link的 to属性值 

4、修改后的最终代码

三、其他

---

一、前言

上一篇文章我们介绍了路由传参-使用query方式传递路由参数，详细可参考博文：原创 Vue笔记整理，专题之路由：5、路由传参-使用query方式传递路由参数 这篇博文我们将介绍：路由传参-使用params方式传递路由参数

二、使用params方式传递路由参数

1、路由实例简约版

之前介绍了路由的基本使用，现在我们继续写一个类似的简单实例，之前加了注释，这里之前的注释就不加了。

然后在它的基础上演示：使用 params方式传递路由参数

 

    
    
    
    
 
    
    

 

    

 
        登录
        注册
 
        
    
 
    

 

2、使用params方式传递路由参数

步骤1：修改路由匹配规则 routes 里面的 path属性值

如下图：加了一个 :id

步骤2：在连接跳转处，修改 router-link的 to属性值

如下图：加了一个 /12

我们运行程序，点击登录进行切换，发现浏览器url地址多了一个 /12

说明修改以后：router-link的 to属性值  能和  routes 里面的 path属性值 能匹配上

那么怎么在组件内部拿到这个参数id呢？

步骤3：组件内部拿到这个参数id

组件有它的生命周期 ，我们在登录组件里面，写一个它的生命周期方法 created，并输出相关对象：

        var login = {
            template: '
登录组件
',

            created() { // 组件的生命周期钩子函数
                // this代表当前组件，$route 表示当前路由信息对象
                console.log(this.$route)
            }
        }

运行程序，点击登录进行切换，检查元素，我们来看一下输出结果：

这个时候 query对象 里面没有值，因为我们没有用到上篇博文提到的方式，如下：

登录

这时候的 id值 在 params里面。

然后我们可以这样来获取 id 的值：this.$route.params.id

    var login = {
      template: '
登录组件
',

      created(){ // 组件的生命周期钩子函数
        console.log(this.$route)
        console.log(this.$route.params.id)
      }
    }

那么怎么把 id的值 放到 h1标签里面

步骤4：把 id的值 放到 h1标签里面

这个就不多说了，与query方式传递路由类似，只是把关键字更换为 params 

运行程序，点击登录进行切换，我们来看一下效果

3、使用 params方式传递多个参数

步骤1：修改 routes路由匹配规则 里面的 path属性值

步骤2：修改 router-link的 to属性值 

运行程序，点击登录进行切换，我们来看一下效果

注意：如果你只写一个参数，如下：

登录

这样运行程序，是匹配不上 routes路由匹配规则的。

4、修改后的最终代码

  
  
  
  
  
  



  


    登录
    注册

    

  

  

三、其他

1、有关 query和 params方式传递路由参数，这两种方式，使用哪种看个人使用习惯

2、运行程序，点击登录进行切换，检查元素，我们来看一下输出结果：

这个 params对象里面的值，是怎么来的？ 

在 matched 匹配对象里面，path是我们手动写的格式，在内部它会通过预解析成一个 regex形式的正则表达式，

然后用这个正则表达式去解析 fullPath对象，解析出来的结果就是我们的 params对象。