electron+vue3全家桶+vite项目搭建【四】集成vue-router

编程小龙

已于 2023-04-04 22:32:13 修改

阅读量3.1k

点赞数 4

分类专栏： electron+vue3全家桶文章标签： vue.js electron javascript vue3全家桶

于 2023-04-02 00:16:38 首次发布

本文链接：https://blog.csdn.net/qq_42365534/article/details/129905443

版权

electron+vue3全家桶专栏收录该内容

33 篇文章 114 订阅

订阅专栏

本文介绍了如何在Vue.js项目中集成vue-router4，包括安装依赖、创建组件、配置路由、在main.ts中引入和使用路由，以及实现页面间的导航功能。通过示例详细展示了路由跳转和返回上一级的操作。

摘要由CSDN通过智能技术生成

引入

视频讲解
 demo项目地址

vue-router官网

单页面应用肯定少不了路由，这一节咱们就来集成一下vue-router

1.引入依赖

npm install vue-router@4

2.配置vue-router

1.首先我们新建一个Demo目录，里面放一个Index.vue用作demo组件的入口文件

// demo/Index.vue
<template>
  <h1>
    这是demo页
  </h1>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

2.我们在src下新建一个router目录，然后在里面添加一个index.ts文件，在里面配置路由

// src\router\index.ts
import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  //  hash 模式。
  history: createWebHashHistory(),
  routes: [
    // 设置首页
    {
      path: '/',
      component: () => import('../components/demo/Index.vue')
    },
    // 配置helloworld页的路径
    { 
      path: '/hello', 
      component: () => import('../components/HelloWorld.vue') 
    },
  ],
})

export default router

3.src下的main.ts中use我们的路由配置

// src\main.ts
import { createApp } from 'vue'
import "./style.css"
import App from './App.vue'
import './samples/node-api'
import router from './router'

const app = createApp(App)

// 配置路由
app.use(router)

app.mount('#app')
  .$nextTick(() => {
    postMessage({ payload: 'removeLoading' }, '*')
  })

4.App.vue文件删除原来的内容，我们直接补充一个 router-view

// src\App.vue
<script setup lang="ts">
</script>

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

<style>
</style>

5.运行项目测试效果：

请添加图片描述

3.路由跳转

我们调整demo/Index.vue的内容：

<template>
  <h1>
    这是demo页
  </h1>
  <ul>
    <li><router-link to="/hello">链接跳转helloworld页</router-link></li>
    <li><a @click="goTo('/hello')">点击事件跳转helloWorld页</a></li>
  </ul>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

// 点击事件跳转对应页面
function goTo(path: string) {
  router.push(path)
}
</script>

<style scoped>
ul {
  list-style: none;
}
</style>

HelloWorld.vue中补充一个返回上一级路由的按钮：

<script setup lang="ts">
// ...
import { useRouter } from 'vue-router'

const router = useRouter()
function goBack(){
  router.back()
}
// ...
</script>

<template>
  <el-button type="success" @click="goBack">返回上一页</el-button>
</template>

运行显示如下：
请添加图片描述