路由的传参

目录

路由传参

声明式导航-query

声明式导航-params  

---

路由传参

在上一个文章中,讲述了一下路由的基本用法，但是现在，我有了一个新的需求 
 就是要根据上一个路由的一些值，进行当前路由的一个渲染，这个时候就用到我们的路由传参了
 
路由传参分为哪几个方式呢？ 分为  query传参  和params传参
 接下来我会用实际的操作 进行这两个 传参方式的一个讲解  有声明式导航和编程式导航两种

先介绍这两种方法在声明式导航中的用法 

声明式导航-query

首先是query 传参 两种方式 一种是直接书写  这一种相信大家在访问浏览器页面的时候经常遇到

 .

 <router-link to="/mine?id=1">我的</router-link>

   接受参数要使用vue-router 模块下的 useRoute方法 

   

import {useRoute} from 'vue-router'
  
const route = useRoute()

   如果想知道这个里面具体有什么 可以直接打印 如果要渲染这个参数，可以在模版中使 router.query.参数名来进行接受  以上面为例 那么接受参数应该是

  {{ route.query.id }}

  这样的传参方式是不是非常简单，那如果我将参数像这样增加呢

  <router-link to="/mine?id=1&name='手机'&price=18000&num=111">我的</router-link>

如果还认为在这个简单，那再加一些呢 ？那有没有一种方法让他写起来没有那么复杂呢？

当然是有的，作为一个非常流行且受欢迎的框架，怎么会考虑不不到我们想的问题呢

我们可以以这样的格式来写

 <router-link :to="{path:'/mine',query:{id:1,name:'12'}}">我的</router-link>

在实际的开发中，我们的这个对象就是循环出来的

声明式导航-params  

 params的用法和query是类似的但是需要注意，在配置路由的时候一定记得加上 /:参数名

用法    路由/参数 接受时就类似 query了  

    {
      path: '/mine/:id/',
      name: 'Mine',
      component: Mine
    },

 <router-link to="/mine/2">我的</router-link>

多个参数就是 路由上 path:'/mine/:id?/name?' 问号代表参数可选

由于篇幅有限，下一篇会进行编程式导航用法讲解，以及解决一些路由接受参数上的问题