vue 之路由跳转及传参

   vue 之路由跳转有：

   1、 this.$router.push进行编程式路由跳转

    2、 router-link 进行页面按钮式路由跳转

  vue 之路由传参有：

    1、 this.$route.params获取路由传递参数

    2、this.$route.query获取路由传递参数

    区别： params 和 query 都是传递参数的，params不会在url上面出现，并且params参数是路由的一部分，是一定要存在的 query则是我们通常看到的url后面的跟在？后面的显示参数

 vue 之路由跳转及传参示例：

    一.使用router-link进行路由导航，传递参数：

     父组件：

  子组件中：使用this.$route.params.num来接收路由参数

     

    路由配置文件中：在路径绑定num参数

     

   地址栏中：

 二、直接调用$router.push 实现携带参数的跳转：  

     父组件中：模板渲染中调用函数，传递参数

     

 

  子组件中：使用 this.$route.params.id  获取参数

     

 路由配置文件中：id用来为参数占位

     

 

    地址栏中：

        

三、通过路由属性中的name来确定匹配的路由，通过params来传递参数：使用name来匹配路由

     

    子组件中：依然使用 this.$route.params.id  接收参数

     

  路由配置文件中： 使用name配置

    

 地址栏中：不显示参数

   

四、使用path来匹配路由，然后通过query来传递参数，这种情况下 query传递的参数会显示在url后面?id=？

     父组件中：使用query来传递参数

     

 

  子组件中：使用 this.$route.query.id来接收参数

    

 

   路由配置文件中：

   

 

   地址栏中：

    

 

 

vue 之路由跳转及传参

原文：https://www.cnblogs.com/whx123/p/12101026.html