当前位置：首页 > news >正文

vue3：初学 vue-router 路由配置

news 2025/3/11 9:03:33

承上一篇：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'),props:{ msg:'Hello,Vite' } // 传参数}
]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">&nbsp; <button @click="search">查询</button>&nbsp; <button @click="prefix">前缀查询</button>&nbsp; <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