栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Vue.js

Electron开发实战之07-vue-router

Vue.js 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Electron开发实战之07-vue-router

源码 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


  • views/Login.vue


  • 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


  • 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' 可以切换路由

转载请注明:文章转载自 www.mshxw.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号