Electron开发实战之07-vue-router

来源:简书分类: 文章浏览史发布时间:2021-09-08 15:41:33 最后更新:2021-09-08 浏览:779

转载声明：

本文为摘录自“简书”，版权归原作者所有。

原文链接:

https://www.jianshu.com/p/b51e280850ac

温馨提示：

为了更好的体验，请点击原文链接进行浏览

摘录时间：

2021-09-08 15:41:33

源码 j、源码 j-step-c7、相关视频

首先安装依赖

bash

yarn add vue-router -D

在renderer目录下添加几个文件夹及文件，完成后项目结构差不多如下：

renderer
│
└───router
│   │   router-config.js
│   │   routes.js
│ 
└───views
│   │   Chat.vue
│   │   Login.vue
│ 
│   App.vue
│   index.js

views/Chat.vue


<template>
  <div>Chat</div>
</template>

views/Login.vue


<template>
  <div>Chat</div>
</template>

router/routes.js


import Login from '@/views/Login.vue'
import Chat from '@/views/Chat.vue'

export default [
  {
    path: '/',
    name: 'login',
    component: Login
  },
  {
    path: '/chat',
    name: 'chat',
    component: Chat
  }
]

routers/router-config.js


import routes from './routes.js'

export default { routes }

renderer/App.vue


<template>
  <div id="app">
    <router-view />
  </div>
</template>

renderer/index.js


import Vue from 'vue'
import Router from 'vue-router'
import routerConfig from './router/router-config.js'
import App from './App.vue'

Vue.use(Router)

const router = new Router(routerConfig)

// 关闭生产模式下给出的提示
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

bash

yarn dev

ps: 在开发者工具的Console 中输入 location.hash = '#/chat' 可以切换路由

上一节 Electron开发实战之06-vue
目录
 下一节 Electron开发实战之08-Login.vue