[Day 25] vue-router路由传送参数 props

昨天做好了节庆活动的清单，但是目前只能看到大纲，没办法看到活动详情，

所以在渲染清单的同时，要帮他加上连结，点击後就可以跳转到对应的活动页面

那活动有好几十个，甚至超过百个，怎麽可能每个活动都做一个Page呢~

这个跟组件的概念很相似，但是组件是渲染在同一个页面，而这次是需要呈现在不同的连结里

这时候就需要vue-router出马了

我们可以做一个template页面，只要把资料塞进去，就可以渲染出格式相同资料不同的页面了！

router-link 传递参数的方法

有分成使用props 跟 不使用props二种

可参考 官方文档 及网路上搜寻到写得不错的参考资料1 参考资料2 参考资料3

今天先介绍 传递参数不使用props 的，它分成params 跟 query 二种，

params可以想像成是post的方式，点击连结过去时参数不会显示在URL上面

query就类似get的方式，网址上会有 /path?参数名称=参数值

<!-- 传送参数的页面 -->
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">
	Register
</router-link>

在对应的页面接收参数要使用

<!-- 接收参数的页面 -->
<!-- params -->
<div>
	 传来的参数:{{ $route.params.userId }}
</div>
or
<!-- query -->
<div>
	 传来的参数:{{ $route.query.userId }}
</div>

实作

设定路由的参数

首先要规划一下，当点击连结时，要传什麽资料过去呢?

这边一样先放资料集连结 节庆专区，可以看到每一笔资料都有一个唯一键 actId

这样只要在资料集中找到 actId = 传入的数字 的那笔资料，就可以渲染页面了！

route/index.js 加上 新路由

不透过props传递参数的话，路由这边就照旧的写法即可

{
    path: '/festivalDetail',
    name: 'FestivalDetail',
    component: FestivalDetailPage,
},

FestivalPage.vue 加上router-link

<v-col sm="12"
  v-for="item in festivalList"
  :key="item.actId"
>
<!-- 在原本渲染子组件的地方 包一层 router-link -->
  <router-link :to="{name:'FestivalDetail', query:{actId:item.actId}}">
    <Festival :festival="item"></Festival>
  </router-link>
</v-col>

FestibalDetail.vue 接收参数

可以直接在html 用$route.query.actId 渲染参数，

也可以在JS里，提取参数後使用。

<v-row>
  <v-col cols="4">
    js的渲染的值
    {{getActId()}}
  </v-col>
  <v-col cols="8">
    html渲染的值
    {{ $route.query.actId }}
  </v-col>
</v-row>

<script>
export default {
  name: 'FestivalDetailPage',
  data: () => ({
  }),
  methods: {
    getActId() {
      return this.$route.query.actId;
    },
  },
};
</script>

附录-去除router link 的下画线

用 时，前端会自动渲染成格式，所以预设会有超连结的底线

可以用css的方式把它移除，参考

a {
  text-decoration: none;
}

.router-link-active {
  text-decoration: none;
}

成果

点击後跳转的连结

http://localhost:8080/#/festivalDetail?actId=419

跳转後的画面

ok~ 本来今天要直接把活动详情写完的，结果在路由传递参数卡了一下

研究後感觉蛮有用的就乾脆写一篇记录起来