Component 鬼牌(二): 看网址决定 Component

前端 router

前端 router 是一个很厉害的技术，让 JavaScript 的内容与网址有了关系。并且让分享某个特定的内容，不再是 Server Side Render 的专利。最重要的是让网速慢的使用者，也可以拥有好的浏览体验，不用点击连结，整页闪一下才更新。

Demo

可以看看几个大厂的网站 Youtube, Facebook, Gmail 都有使用这样的技术。

需求

只要你想要「贴网址分享分容」就要使用前端 router
大部份的 SPA 网站都具备这样的功能 (才对) 毕竟任何一个前端框架的生态圈都包含 route 的功能。

用 vue router

用 vue-cli 的 hello world 当例子

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

http://localhost:8080/

http://localhost:8080/about

两个页面，网址不同，但是 nav 的部份并没有更新。
是透过 vue router 的机制替换了 <router-view> 位置的 component

替换 component 的样子与昨天的 <component :is=""> 很像，但是用 vue-router 是比较常见的做法，毕竟 vue-cli 都直接送你了。

怎麽决定「跳转到哪」

我自己除了 nav 很少使用 route-link，它最後会渲染成 <a href=""></a>

大部份都使用 $router.push({ name: RouteName }) 像是下面这样使用

<button @click="$route.push({ name: 'Home' })"></button>

「哪个位置」要跳转

切版时，留一个 html tag 的位置，写下 <route-view /> 这个位置自然放进「网址指定的 component 」进来。

其实这很简单，但是真正不容易发现的是，可不可以设定 props

跳转不同的 component 可以放相同的 props 吗？

昨天用了

<component :is="componentName"
  :data="mock"
  @update:data="mock = $event">
</component>

那天可以将 route-view 的 tag 放上 props 吗？

<route-view :is="componentName"
  :data="mock"
  @update:data="mock = $event">
</route-view>

直接拿 hello world 的 code 来改看看

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view :chris="{ name: 'chris', age: 18 }"/>
  </div>
</template>

Home.vue

指定 prop 并直接显示在画面上

<template>
  <div class="home">
    <pre>chris: {{ chris }}</pre>
    <img alt="Vue logo" src="../assets/logo.png">
  </div>
</template>

export default {
  name: 'Home',
  props: {
    chris: {
      type: String,
      required: true,
    },
  },
};

About.vue

指定 prop 并直接显示在画面上

<template>
  <div class="about">
    <pre>chris: {{ chris }}</pre>
    <h1>This is an about page</h1>
  </div>
</template>

export default {
  name: 'About',
  props: {
    chris: {
      type: String,
      required: true,
    },
  },
};

直接在 <route-view> 给 props，是会在适合的 component 自己吃自己需要的 props。