vue3:初学 vue-router 路由配置

承上一篇: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

相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴6 小时前
Mix
前端·webgl
代码续发6 小时前
前端组件梳理
前端
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_7 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈不知代码7 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记7 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante8 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端