vue3：初学vue-router路由配置
- 软件开发
- 2025-09-10 15:09:01
承上一篇：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 routercd \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
vue3：初学vue-router路由配置由讯客互联软件开发栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“vue3：初学vue-router路由配置”
