页面切换好夥伴- Vue Router [序]

前言

在过去，路由主要是 Server 负责，根据不同的路由去决定要渲染的页面，回传整个 HTML 回来，现在较多的架构是前後端分离，前端负责页面呈现资料；後端负责提供资料

只要 API 格式定义好，前端可以随意选择任何框架或无框架开发

路由?

一种对照表的概念，根据不同的url地址来显示不同的页面或内容的功能
如果每次换页都需要刷新页面，会影响使用者体验，於是发展出 由前端管理路由

原本後端负责的路由改由前端处理，从头到尾只有一个 index.html ，切换页面时，不是整个页面切换，而是发送 Request 取得 Response，将资料更新

在这样只有一个 index.html 的情况下，浏览器大致有两种路由模式可以使用:

hash 模式

URL 中的 # 符号，例如: https://www.example.com/#yoyoyo
比较不美观
改变 # 後面的值，不会向 Server 发送请求，也不会刷新页面
触发 hashchange 事件

history 模式

HTML 5 的 pushState() 和 replaceState() (History API)
onpopstate 事件监听

可以使用 history 物件中的 back() forward() go() 在历史纪录中移动，HTML5 增加的 history.pushState history.replaceState() 可以异动历史纪录

ex:

history.pushState(state [,title][,url]); // 历史记录中增加一条记录

history.replaceState(state [,title][,url]); // 修改目前的历史纪录

安装路由

vue add router
// 会询问是否使用 history mode

产生以下档案:

views 资料夹
- 包含两个档案 About.vue 和 Home.vue，代表页面
router/index.js
- 路由的设定

ex:

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
export default router

<!-- App.vue -->
<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view/>
</template>

使用 router-link 标签，to 属性後面接要造访的页面，router-view放置处代表要渲染元件的位置
ex:

// App.vue
<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
    <router-link to="/profile">Profile</router-link>
  </div>
  <router-view/>
</template>

未完待续...