Day 11：Router 怎麽绕－router-link、router-view

大家应该也发现到了，目前点选 Navbar 项目并没有任何反应；但是点选公版中的 Home 和 About 时：

• 点选 About，网址跳转至「 http://localhost:8080/about 」，画面变成 About.vue 的内容
• 点选 Home，网址跳回「 http://localhost:8080 」，画面回到 Home.vue 的内容

之前有介绍过 App.vue 是整个专案的核心主件，并且会在此处进行切换路由元件及渲染相应页面，因此仔细观察 App.vue，我们可以发现与两个 router 相关的关键字—— <router-link> 和 <router-view>元件。

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

<router-link>：导航

<router-link> 是个提供使用者在具有路由功能的应用程序中，能透过点击事件触发导航功能的元件，利用 prop to 导向指定的目标路由，渲染结果预设为 <a> 标签。（aria-current 为无障碍网页属性）

<!-- template -->
<router-link to="/">Home</router-link>

<!-- render -->
<a href="/" class="router-link-active" aria-current="page">Home</a>

如欲指定渲染结果的标签，则可使用 tag 变更指定，且仍然保有监听点击事件而触发路由切换的效果。

<!-- template -->
<router-link to="/" tag="li">Home</router-link>

<!-- render -->
<li class="router-link-active">Home</li>

prop to 为必填项目，其所指定的路径透过触发点击事件後传递给 router.push() 方法进行路由切换。该值可以是字串或描述目标位址的路由物件：

• 字串型别

  <router-link to="/">Home</router-link>
  

• 绑定路由物件

  <router-link :to="{ path: '/' }">Home</router-link>
  <router-link :to="{ name: 'About' }">About</router-link>
  

<router-view>：路由出口

<router-view> 则是个功能元件，其随着 <router-link> 的路径切换，负责显示出匹配当前路径的元件内容。以 App.vue 为例，当路径切换至「/about」时，<router-view> 就会将画面内容在其范围内渲染成当前路径 About.vue 的元件内容。

<router-view> 唯一的 prop 就是 name，用来为自己命名，有了指定名称之後，<router-view> 就只会显示对应的元件内容。例如在同一个页面中需要同时显示两个区块——主要区块和侧边栏，此时就可以在同一个路由中设置 components 物件（特别注意 component 的结尾要加上代表复数的「s」），接着在 components 里各别设定 <router-view> 所对应的元件，name 作为 key（若无指定名称则预设为 default），元件名称作为 value。

<router-view class="view main" />
<router-view class="view sidebar" name="aside" />

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Main,
        aside: Sidebar,
      }
    }
  ]
})

route、routes、router 分清楚

接着来厘清这三个相似名词的含义：

• route：单一路由，一个路由只对应到一个元件
• routes：由多个单一路由（route）组合而成的路由阵列，在 router/index.js 中定义路由配置後，将配置参数传入创建的 router 实例中
• router：路由管理器，在 main.js 将 router 实例挂载到 Vue 实例中得以启用路由功能

由於 router 实例在 main.js 挂载到 Vue 实例中，所以在每个元件里都可以使用下列属性：

• this.$route：代表当前的路由物件（The Route Object），其包含一些唯读属性解析该路由的相关信息，例如路径（path）、路由参数（params）、查询参数（query）等。
• this.$router：代表 router 实例，其包含的设置更多，如建构选项（Construction Options）、实例属性（Properties）及方法（Methods）。

两种属性各司其职，但以下方式则会指向同一个路由物件：

• this.$router.currentRoute =this.$route

试着在 <script> 写个 console 观察结果就知道了！

mounted() {
	console.log("router: ", this.$router.currentRoute);
    console.log("route: ", this.$route);
},

为 Navbar 设定路由

了解 router 规则之後，现在来改写我们的 Navbar 路由吧！

首先，四个 navItem 分别要在 router/index.js 中新增路由配置，以及在 views 资料夹中新增对应的 .vue 档案，才能在路径切换时找到元件渲染内容。

• 原始结构

  <b-navbar-nav
    class="my_navbar_item"
    v-for="navItem in navList"
    :key="navItem.id"
  >
    <b-nav-item href="#">{{ navItem.item }}</b-nav-item>
  </b-navbar-nav>
  

  data() {
    return {
      navList: [
        { id: 1, item: "全部书单" },
        { id: 2, item: "七折区" },
        { id: 3, item: "五折区" },
        { id: 4, item: "iT邦帮忙铁人赛系列书" },
      ],
    };
  },
  

• 改写方式：在 data 中新增 name，以供 to 绑定。

  data() {
    return {
      navList: [
        { id: 1, item: "全部书单", name: "All" },
        { id: 2, item: "七折区", name: "Discount30" },
        { id: 3, item: "五折区", name: "Discount50" },
        { id: 4, item: "iT邦帮忙铁人赛系列书", name: "Ithelp" },
      ],
    };
  },
  

  1. 方法１：透过 router 实例方法 router.push()
     维持 BootstrapVue 元件结构，在 <b-nav-item> 上新增 click 事件，於触发点击事件时使用 router.push() 方法导向指定路由位址。

     <b-navbar-nav
     	class="my_navbar_item"
     	v-for="navItem in navList"
     	:key="navItem.id"
     >
     	<b-nav-item href="#" @click="$router.push({ name: navItem.name })">
     		{{ navItem.item }}
     	</b-nav-item>
     </b-navbar-nav>
     

     顺手一起改写 <b-navbar-brand>，使得点击「天珑书单」时导向首页位址。

     <b-navbar-brand href="#" @click="$router.push('/')">
     	天珑书单
     </b-navbar-brand>
     

  2. 方法２：使用 <router-link> 元件
     因为 <b-nav-item> 已是巢状结构中的最子层，所以在此处直接用 <router-link> 元件来取代，另加上原本在 <b-nav-item> 上的 class="nav-link" 以渲染出 BootstrapVue 元件样式。

     <b-navbar-nav
     	class="my_navbar_item"
     	v-for="navItem in navList"
     	:key="navItem.id"
     >
     	<router-link :to="{ name: navItem.name }" class="nav-link">
     		{{ navItem.item }}
     	</router-link>
     </b-navbar-nav>
     

试试看点击每个 Navbar 项目是否都能成功跳转了呢～

参考资料

• Vue Router - API Reference