主面板配置

主面板配置

1. 引入路由

1. 下载vue-router

yarn add vue-router --save

2. 一级路由配置

router/index.js

1. 引入对应模块

import Vue from 'vue'import VueRouter from 'vue-router'

2. 声明使用

Vue.use(VueRouter)

3. 输出路由对象

export default new VueRouter({ // 所有路由 routes: [ ... ]})

4. main.js中使用路由

引入路由器

import router from './router/index'

配置

注意

5. App.vue中进行组件化

1. 引入

2. 实例

<template> <div> <!--路由组件--> <router-view></router-view> <!--底部选项卡--> <tab-bar></tab-bar> </div></template>

3. 调试运行