路由传参总结

1.通过router-link 传参 (html)

• 常量传参

1. 一个参数

   //1.在router.js文件里面对接收参数的路由进行配置, 不要找错了
   //index.js
   [
   ...
   path : 'demo1/:name'
   ]
   
   //2. xxx.vue文件 跳转, to后面的是跳转目的路由,后面跟的就是与路由
   //配置对应的参数
   <router-link to="demo1/lwj"> </router-link>
   
   //3. 跳转过去后在浏览器地址栏可以看到...demo/lwj
   

2. 两个参数

   • /demo/:name/:age

     //1.在router.js文件里面对接收参数的路由进行配置, 不要找错了
     //index.js
     [
     ...
     path : 'demo1/:name/:age'
     ]
     
     //2. xxx.vue文件 跳转, to后面的是跳转目的路由,后面跟的就是与路由
     //配置对应的参数
     <router-link to="demo1/lwj/22"> </router-link>
     
     //3. 跳转过去后(地址为/demo)在浏览器地址栏可以看到...demo/lwj/22
     
     //4. 获取参数:
     /**
     注意: 参数名与路由配置(router.js)中的名字一样
     */
     this.$route.params.name / this.$route.params.age (获取的具体参数)
     
     this.$route.params (获取的参数对象)
     

   • /demo/:deID/demo2/:de2ID ????

3. 多个参数

   • 与2个的类似

• 变量传参

1. 变量与常量传参区别:

   //1.在router.js文件里面对接收参数的路由进行配置, 不要找错了
   //index.js
   [
   ...
   path : 'demo1/:name/:age'
   ]
   
   //2. 在test.vue里面设置参数变量
   export default {
       data() {
         return {
           Nam : 'lwj',
           Age : '33',
         }
       }
   }
   
   //3. 在test.vue里面设置 动态路由参数
   /**
   注意: 与静态路由的格式不一样, 因为有变量作为参数,所以要绑定 to 属性
   */
   <router-link :to="`demo1/${Nam}/${Age}`">
       
   //4. 获取参数:
   /**
   注意: 参数名与路由配置(router.js)中的名字一样
   */
   this.$route.params.name / this.$route.params.age (获取的具体参数)
   
   
       this.$route.params (获取的参数对象)
   

• 总结
  • router-link方式传参, 无论参数是变量还是常量,他们的参数都会被封装到route.query对象里面; 取参数即取里面的属性
  • 他们的区别是传递参数的方式

2.通过$router.push()传参(JavaScript)[编程式导航]

• 关于$router.push

  除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

  #router.push(location, onComplete?, onAbort?)

  注意：在 Vue 实例内部，你可以通过 router.push。

  想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

  当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。

  声明式	编程式
  <router-link :to="...">	router.push(...)

• 通过path传参数

  1. //方式1
     router.push({ path: `/user/${userId}` }) // -> /user/123
     

     eg:

     //目前只知道仅能传一个参数
     //1.在router.js文件里面对接收参数的路由进行配置, 不要找错了
     //index.js
     [
     ...
     path : 'demo1/:name'
     ]
     
     //2. 在test.vue里面设置参数变量,跳转事件函数
     <button @click="btn"> 跳转 </tutton>
     ...
     export default {
         data() {
           return {
             Nam : 'lwj',
             Age : '33',
           }
         }
     }
     ...
     methods : {
     	btn(){
     //与router-link类似, 但注意写法的区别, 而且这种方式只能传一个参数
     		this.$router.push({path : `demo1/${Nam}`})
     	}
     }
     
     //3. 获取参数
     //这种方式也是将参数封装到$route.params 对象里面
     this.$route.params.name / this.$route.params
     

  2. //方式2  name 与 params 的结合
     router.push({ name: 'user', params: { userId }}) // -> /user/123
     

     eg:

     //1.在router.js文件里面对接收参数的路由进行配置, 不要找错了
     //index.js
     [
     ...
     path : 'demo1/:name/:age,
     name : 'demo1Name'
     ]
     
     //2. 在test.vue中:
     ...
     this.$router.push({
     //这个 name 与 router里配置的 path的name一致
               name : 'demo1Name', 
               params : {
     //params对象里面的key要与 touter里面 的id名一致
                 name : this.Nam,
                 age : this.age
               }
             });
             
     //3. 获取数据
     this.$route.params // 参数对象
     地址栏不会显示参数
     

  3. 方式3:name / path 与 query的配合使用
     //1.在router.js文件里面对接收参数的路由进行配置, 不要找错了
     //index.js
     [
     //不需要配置id, 参数(键值对)在query对象中
     path : 'demo1' 
     name : 'demo1Name'
     ]
     
     //2. 在test.vue中:
     ...
     this.$router.push({
     //这个 name 与 router里配置的 path的name一致
               name : 'demo1Name', 
               query : {
                 name : this.Nam,
                 age : this.age
               }
             });
     ...
     //或者如下
     this.$router.push({
     //这个 name 与 router里配置的 path的name一致
               path : 'demo1', 
               query : {
                 name : this.Nam,
                 age : this.age
               }
             });
             
     //3. 获取数据
     this.$route.query // 参数对象
     this.$route.query.age
     
     //注意, 与params的区别是, query传递的参数是会显示到浏览器地址栏的 : .../demo1?name=lwj&age=33;
     

• params 与 query 区别

  • $route.params

    • 类型: Object

      一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。

  • $route.query

    • 类型: Object

      一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。

• 通过name

• 区别

  1. query会将参数拼接到url后面

3.router 的区别