Electron开发实战之07-vue-router
源码 j、源码 j-step-c7首先安装依赖bashyarn add vue-router -D在renderer目录下添加几个文件夹及文件,完成后项目结构差不多如下:renderer│└───router││router-config.js││routes.js│└───views││Chat.vue│...
·
首先安装依赖
- 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'
可以切换路由
更多推荐
已为社区贡献1条内容
所有评论(0)