承上一篇：nodejs：express + js-mdict 作为后端，vue 3 + vite 作为前端，在线查询英汉词典
安装 cnpm install vue-router -S
现在讲一讲 vue3：vue-router 路由配置
cd \js\mydict-web\src
mkdir router
cd router
我还没有编写过 component，先拿 HelloWorld.vue 练练手。编写 router/index.js 如下
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
{ path:'/',
name:'hello',
component:() => import('../components/HelloWorld.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes: routes
})
export default router
cd \js\mydict-web\src
copy main.js main1.js
修改 main1.js 如下
import { createApp } from 'vue'
import App from './App1.vue'
import router from './router'
const app = createApp(App)
app.use(router).mount('#app')
copy App.vue App1.vue
修改 App1.vue 如下，增加一行 <router-view></router-view> 后面代码不变
<template>
<div id="app">
<input v-model="sWord" placeholder="请输入英文单词" @keyup.enter="search">
<button @click="search">查询</button>
<button @click="prefix">前缀查询</button>
<button @click="fuzzy">模糊查询</button>
<div v-if="result">
<h3>查询结果</h3>
<div id="result1" ref="result1" v-html="result"></div>
</div>
<div v-if="error">{{ error }}</div>
<router-view></router-view>
</div>
</template>cd \js\mydict-web\
copy index.html index1.htm
修改 index1.htm 如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite 在线英汉词典查询</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main1.js"></script>
</body>
</html>
运行 cmd
cd \js\mydict-app
node server/app.js
Server is running on port:8006
运行 cmd
cd \js\mydict-web
npm run dev
访问 http://localhost:5173/index1.htm
