electron-vue怎么搭配路由
时间: 2023-10-01 11:03:46 浏览: 94
1. 安装依赖:
```
npm install vue-router
```
2. 在src/renderer目录下新建router文件夹,并在该文件夹下新建index.js文件,编写路由代码:
```javascript
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
})
```
3. 在src/renderer/main.js文件中引入路由:
```javascript
import Vue from 'vue'
import router from './router'
new Vue({
router,
render: h => h(App)
}).$mount('#app')
```
4. 在App.vue中添加<router-view>标签,用于展示路由对应的组件:
```html
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
```
5. 在组件中使用<router-link>标签进行路由跳转:
```html
<template>
<div>
<h1>Home</h1>
<router-link to="/about">About</router-link>
</div>
</template>
```
以上就是electron-vue搭配路由的基本步骤,可以根据实际需求进行相应的修改和优化。
阅读全文