下载安装路由
 1. 下载安装路由库  
 
 npm i vue-router  
 
 2.  在 src 中新建 views 文件夹,在其中新建页面  
 
 3.  在 src 中新建一个 router 文件夹,其中新建一个 index.js  
 
 
import { createRouter, createWebHashHistory } from 'vue-router';
// 导入页面
import index from '../views/index.vue';
import about from '../views/about.vue';
// 注册
const routes = [
{
path: '/', // 路径名,首页是/
name: 'index', // 页面名
component: index, // 组件,页面对应的文件
},
{
path: '/about',
name: 'about',
component: about,
},
];
// 路由实例
const router = createRouter({
history: createWebHashHistory(),
routes, // 所有的路由
});
// 导出
export default router; 4.  在 main.js 中安装路由  
  import { createApp } from 'vue'
import App from './App.vue'
// 导入路由实例
import router from './router';
// vue实例
const app = createApp(App)
// 在vue实例上安装路由
app.use(router)
app.mount('#app') 5.  在 App.vue 中写出口 
  <template>
<router-view></router-view>
</template>路由模式
 模式有两种: h5 、 hash 
  h5: createWebHistory;http://localhost:5173/about;刷新404hash:createWebHashHistory;http://localhost:5173/#/about捕获404页面
 1.  新建一个 404 页面( NotFound )  
  2.  导入页面  
  3. 在配置数组中添加如下:  
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },重定向
使用redirect属性
{
path: '/:pathMatch(.*)*',
name: 'NotFound',
redirect: '/'
},