vue3：初学 vue-router 路由配置

belldeep2025-03-08 20:08

承上一篇：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 如下

javascript 复制代码

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 如下

javascript 复制代码

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> 后面代码不变

html 复制代码

<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 如下

html 复制代码

<!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