Bootstrap

研发效能DevOps: Vite 使用 Vue Router

目录

一、实验

1.环境

2.初始化前端项目

3.安装vue-router

4.Vite 使用 Vue Router

二、问题

1.运行出现空页面

2.Vue Router如何禁止页面回退


一、实验

1.环境

(1)主机

表1 主机

系统

软件版本备注
Windows11VS Code1.94.2
Node.jsv18.20.4(LTS)

运行(输入cmd)

bb3a3a38004c40f2bbe67919cce22e05.png

查看VS Code版本

Code --version

查看node版本

node -v

87de6fb85c2d465592c1d9bf92f6903d.png

查看npm版本

npm -v

e2bc65daa7634b05ab83d20f2e7f53ca.png

2.初始化前端项目

(1)安装vite

cnpm create vite@latest

输入y,然后选择vue

接下来选择JavaScript

完成

(2)安装依赖

切换目录

cd vite-router

这里切换cnpm安装依赖

cnpm install

(3) 运行

npm run dev

弹出界面:

可以访问到Vite + Vue

http://localhost:5173/

(4)退出

CTRL + C 结束

0f487b1ab5c24e3d91e69c4272ca89e8.png

输入Y

f23cf1681ec44fa68e7c1bdc1515faf3.png

3.安装vue-router

(1) 查阅

https://router.vuejs.org/zh/installation.html


 

(2) 安装vue-router

使用cnpm安装

cnpm install vue-router@4

(3)Vs Code 查看项目目录


(5)创建路由配置目录router

(6) router下创建index.js (实现组件与路由映射)

(7)创建页面组件目录views

(8)views下创建多个组件

Index.vue

<script setup>
</script>

<template>
    <div>
        首页
    </div>
</template>

<style>
</style>

Devops.vue

Pipeline.vue

4.Vite 使用 Vue Router

 (1)查阅

https://router.vuejs.org/zh/guide/

不同的历史模式

https://router.vuejs.org/zh/guide/essentials/history-mode


 

(2) 修改index.js

导入创建路由的方法

import { createWebHistory, createRouter } from 'vue-router'

导入需要路由的组件

import Index from '../views/Index.vue'
import Devops from '../views/Devops.vue'
import Pipeline from '../views/Pipeline.vue'

定义路由映射

const routes = [
    { path: '/', component: Index },
    { path: '/devops', component: Devops },
    { path: '/pipeline', component: Pipeline },
  ]

创建路由实例

const router = createRouter({
    history: createWebHistory(),
    routes,
})

导出默认路由

export default router 

(3)查阅

https://router.vuejs.org/zh/guide/

 注册路由

(4)main.js集成路由

导入router

import router from './router'

注册路由

const app = createApp(App)
app.use(router)
app.mount('#app')

(4)查阅

https://router.vuejs.org/zh/guide/

创建链接与渲染路由组件

(5)修改App.vue

创建链接与渲染路由组件

<p><RouterLink to="/">Go to Index</RouterLink></p>
<p><RouterLink to="/devops">Go to Devops</RouterLink></p>
<p><RouterLink to="/pipeline">Go to Pipeline</RouterLink></p>
<router-view></router-view>

(6)运行

npm run dev

弹出界面:

 访问

http://localhost:5173

点击Go to Index

点击Go to Devops

点击Go to Pipeline

二、问题

1.运行出现空页面

(1)报错

(2)原因分析

index.js未成功实现组件与路由映射

(3)解决方法

修改

成功:

2.Vue Router如何禁止页面回退

(1)push

Vue Router默认是push,是可以回退页面的。

(2)replace

禁止回退,是不可以回退页面的。

(3)使用

修改App.vue

<p><RouterLink to="/" replace>Go to Index</RouterLink></p>
<p><RouterLink to="/devops" replace>Go to Devops</RouterLink></p>
<p><RouterLink to="/pipeline" replace>Go to Pipeline</RouterLink></p>
<router-view></router-view>

;