Vue笔记：路由之间的传参（手摸手教程）

不跟你多BB,直接开始敲

先创建两个页面（其实就是vue create 命令默认创建的项目更改了一下）

看一下页面效果

给商店页面添加一些商品 <ul> <li v-for="item in list" :key="item.id"> {{ item.name }} </li> </ul> <script> export default { name: "Home", data() { return { list: [ { id: 1, name: "第一个商品" }, { id: 2, name: "第二个商品" }, { id: 3, name: "第三个商品" }, { id: 4, name: "第四个商品" }, { id: 5, name: "第五个商品" }, ], }; }, }; </script>

看一下页面效果

query传参

以前我们通过url传值，都在在地址栏最后面加一个？跟上需要传递的参数，那么在Vue里可以不可以呢？我们来试一下 <router-link to="/about?id=1">{{ item.name }}</router-link>

query接收参数

创建一个生命周期函数，我们打印一下this.$route看一下 <script> export default { created() { console.log(this.$route) } } </script> 用query传值的时候，所有的参数都在this.$route.query里面

直接把参数显示在页面上 <template> <div class="about"> <h1>这里是购物车</h1> <p>{{ this.$router.query.id }}</p> </div> </template> 看一下效果

太好了，这样做可以获得到参数，那么我们更改一些写法，使其每次点击的时候传递不同的参数 <router-link :to="`/about?id=${item.id}`">{{ item.name }}</router-link>

看一下效果

动态路由的的传参

先创建一个新的info页面，以便我们观察 在router页面下的index文件里配置相关的路由信息

动态路由传递参数的时候，路由配置哪里设置了几个参数，在传递的时候就需要传递几个参数 const info = () => import('../views/info/index') { path:'/info/:id/:name', name:'info', component:info }

在商店页面更改一下router-link

<h1>这里是商店</h1> <ul> <li v-for="item in list" :key="item.id"> <!-- <router-link :to="`/about?id=${item.id}`">{{ item.name }}</router-link> --> <router-link :to="`/info/${item.id}/${item.name}`"> {{ item.name }} </router-link> </li> </ul>

动态路由接收参数（params）

还记得上面打印得那张this.$route得图片么？动态路由的参数在params里

动态路由传递的参数需要这样接收this.$route.params.参数 <template> <div> <h1>这里是商品详情页面</h1> <p> {{ this.$route.params.id }} </p> <p> {{ this.$route.params.name }} </p> </div> </template> <script> export default { } </script> 看一下页面效果

route和rouer的区别

$router

当前所有的路由对象可以理解为routes就是这个我们配置所有路由的地方

$route

当前路由对象用于获取当前路由里面的属性或者方法

当前的页面哪个是活跃的，那么$route就是谁

页面间的跳转

路由的切换，本质是组件的显示与隐藏字符串的方式进行跳转 <router-link :to="`/ 页面名称?参数名=${参数值}`"></ router-link> 对象的方式进行跳转 <router-link :to="{path: '/页面名称' }">< / router-link> js的方式进行跳转

我们利用$router的push方法进行跳转

<h1>这里是商店</h1> <ul> <li v-for="item in list" :key="item.id"> <!-- <router-link :to="`/about?id=${item.id}`">{{ item.name }}</router-link> <router-link :to="`/info/${item.id}/${item.name}`">动态路由 {{ item.name }} </router-link> --> <button @clikc='jump(item)'>跳转页面,传参：{{item.id}}：{{item.name}}</button> </li> </ul> 当我们用js的方式进行跳转，同时又需要传递参数的时候，一定要使用命名路由，就是这个一般我们用命名路由的时候，name和path的值是一样的 点击按钮，执行jump方法，进行跳转传递参数的格式为this.$router.push({name:‘路由名称’,query:{ 参数们 }})当需要用到动态路由传参(params)的时候，把query换成params即可 methods:{ jump(item) { console.log(item) this.$router.push({name:'About',query:{id:item.id,name:item.name}}) } }

看一下效果 非常成功