主面板配置
2021-04-02 10:13:27 11 举报AI智能生成
主面板配置
作者其他创作
大纲/内容
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'
配置
new Vue({
el: '#app',
router, // 配置路由器
render: h => h(App)
})
注意
1. 配置完成路由后, 会增加了几个组件 <router-link></router-link> 、<router-view></router-view>、<keep-alive></keep-alive>
2. 配置完成路由后, 增加了两个属性供访问使用: $router 、$route
5. App.vue中进行组件化
1. 引入
<script>
// 1. 引入需要的组件
import TabBar from '../src/components/TabbBar/TabBar'
export default {
name: "App",
components: {
TabBar
}
}
</script>
2. 实例
<template>
<div>
<!--路由组件-->
<router-view></router-view>
<!--底部选项卡-->
<tab-bar></tab-bar>
</div>
</template>
3. 调试运行
切换url, 检查是否跳转
0 条评论
下一页
