vue3加vite安装路由并跳转页面

最新推荐文章于 2025-07-06 19:15:47 发布

熊抱抱的一粒

最新推荐文章于 2025-07-06 19:15:47 发布

阅读量5.2k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_52959651/article/details/124696910

这篇博客介绍了如何在Vue3项目中结合Vite安装和配置路由，以及解决从Vue2升级到Vue3后页面跳转问题的方法。首先通过pnpm或npm安装路由，接着创建新页面，建立router文件夹并配置index.js和router.js。在main.js中进行路由设置。需要注意的是，Vue3中页面跳转需按需引入，不能直接使用this.$router.push，需查阅资料进行修正。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近使用了vue3中的路由器，记录一下。
1.首先安装路由，我使用的是pnpm，也可以使用npm安装

pnpm i vue-router@4
或者
npm i vue-router@4

2.新建页面a.vue

<script setup>
 import { ref } from "vue";
</script>

<template>
a
</template>

<style scoped>
</style>

3.在页面创建router文件夹，新建页面在这里插入图片描述
index.js

import {createRouter, createWebHistory} from 'vue-router'
import routes from './router.js'
 
const router = createRouter({
    history: createWebHistory(), 
    routes
})
 
export default router

router.js

const routes = [
{
        name: 'h',
        path: '/',
        component: () => import('../components/HelloWorld.vue')
    },
    {
        name: 'a',
        path: '/a',
        component: () => import('../components/a.vue')
    }
    
];
 
export default routes//导出

在main.js配置

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'
import ElementUI from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(router).use(ElementUI).mount('#app')

下面就可以跳转页面了，由于vue3和vue2跳转方式不一样，所以我一开始还是使用this.$router.push来跳转，结果报错，然后在网上看才发现也是按需引入，然后才能使用。
跳转路由界面 h.vue

<script setup>
import { onMounted, ref } from "vue";
//引入路由
import { useRouter } from "vue-router";
function zoomImg(obj) {
  console.log(obj.$el, "obj");
  // 一开始默认是100%
  let zoom = parseInt(obj.$el.style.zoom, 10) || 100;
  // 滚轮滚一下wheelDelta的值增加或减少120
  zoom += event.wheelDelta / 12;
  if (zoom > 0) {
    obj.$el.style.zoom = zoom + "%";
  }
  return false;
}
let fontbig = ref('大号字');
    var app = document.getElementById("app");
function bigfontsize() {
  if (fontbig.value=='大号字') {
    fontbig.value='普通字号'
    app.style.fontSize=30+'px'
    console.log(fontbig.value,'进入');
  } else {
    fontbig.value='大号字'
    app.style.fontSize=20+'px'
    console.log(fontbig.value,'不进入');
  }
}
//创建route
 const route = useRouter();
function com() {
//跳转页面
  route.push({path:'/a'})
}
onMounted(() => {
  
});

</script>

<template>
<p>文字</p>
  <el-button type="primary" @click="bigfontsize" v-html="fontbig"></el-button>
  <div
    style="width: 100px; height: 100px; background-color: red"
    @mousewheel="zoomImg(this)"
  >
    <img src="../assets/logo.png" @mousewheel="zoomImg(this)" />
  <el-button type="primary" @click="com">进入</el-button>

  </div>
</template>

<style scoped>
</style>

App.vue

<script setup>
</script>

<template>
  <router-view></router-view>
</template>

<style>
</style>