项目背景：

在使用vue时，想使用a标签实现跳转其他内部资源，发现页面不跳转：

至于原因，之前有篇写了，可以去看下

解决方式：

使用vue-router配置动态路由：

1.创建vue资源和router.ts配置文件：(项目结构如图所示)

2.在APP.vue中写出需要实现导航的内容：

<script setup lang="ts" >

</script>

<template>
  
  <router-link to="/index">首页 </router-link> 
  <!-- to="/index"是软映射，并非文件的相对路径，而是路由的路径 -->

  <router-view></router-view> 
  <!--一定要带上用于显示跳转资源，否则你会发现点击后地址栏变化但是页面不变 -->
  

</template>

<style scoped>

</style>

3.配置router.ts文件：

// 导入 createRouter 函数，用于创建 Vue Router 实例
import { createRouter } from "vue-router";
// 导入 createWebHistory 函数，用于创建基于 HTML5 History API 的路由历史记录
import { createWebHistory } from "vue-router";
// 导入 index 组件，该组件位于当前目录下的 components 文件夹中的 index.vue 文件
import index from "../components/index.vue"; //导入方式一

// 使用 createRouter 函数创建一个 Vue Router 实例
const router = createRouter({
    // 使用 createWebHistory 函数创建路由历史记录
    history: createWebHistory(),
    // 定义路由配置数组
    routes: [
        {
            // 定义根路径的路由
            path: "/",
            // 使用动态导入函数加载 index 视图组件
            component: () => import("../views/index.vue") //导入方式二
        }, //默认路径，只能有一个
        
        {
            // 定义 /index 路径的路由
            path: "/index",
            // 使用之前导入的 index 组件
            component: index
        } //软映射，可多个
    ],
});

// 导出 router 实例，以便在应用的其他部分使用
export default router;

4.在main.ts中使用路由：

// 导入 createApp 函数，用于创建 Vue 应用实例
import { createApp } from 'vue'
// 导入全局样式文件
import './style.css'
// 导入根组件 App
import App from './App.vue'
// 导入路由配置
import router from './router/router'

// 创建 Vue 应用实例，并将 App 组件作为根组件
const app = createApp(App)
// 使用路由配置
app.use(router)
// 将 Vue 应用挂载到指定的 DOM 元素上
app.mount('#app')

5.运行APP.vue查看效果:

• components/index.vue：

<script setup lang="ts">

</script>

<template>
  
  <p>components-index</p>
</template>

<style scoped>

</style>

• views/index.vue

<script setup lang="ts">

</script>

<template>
  
  <p class="read-the-docs">views-index</p>
</template>

<style scoped>

</style>

点击前：

点击后：

感想：

公司一般都有加密系统，配置main.js时候文件被加密，项目运行不起来了；使用豆包的MarsCode工作台，然后发现不支持js文件，一通操作才发现只可以用ts才能导入；刚来上班一周，发际线都感觉变高了，能别干就别干程序员，应届生也没多少钱；10k都没有，楼主也算是个92中的2学生