路由规则的配置在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是组件最终要显示的位置。
这种方式也是父子组件的关系，但和之前学的父子组件不一样的是：他的子组件是动态的，根据路由不同而不同的；之前都是固定好的，父组件的子组件都是确定下来的。
原文：https://www.cnblogs.com/ibcdwx/p/14603465.html