vue-配置路由規則和顯示路由

　　路由規則的配置在src/router/index.js中，可配置如下內容：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  { //一個對象是一個路由的映射規則
    path: '/home', //相對於http://localhost:端口號
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

　　在App.vue進行顯示：

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

　　router-link和router-view是vue提供的組件；

　　router-link是鏈接到路由，最后會渲染成一個a標簽，href指向的就是路由的路徑；

　　router-view是路由轉發的組件最終要顯示的一個位置。

　　總結：router-link是負責引入組件，而router-view是組件最終要顯示的位置。

　　這種方式也是父子組件的關系，但和之前學的父子組件不一樣的是：他的子組件是動態的，根據路由不同而不同的；之前都是固定好的，父組件的子組件都是確定下來的。