- 安装Framework7, Framework7-vue, 并在main.js中引入
// Import F7 import Framework7 from "framework7/framework7.esm.bundle.js"; // Import F7 Vue Plugin import Framework7Vue from "framework7-vue/framework7-vue.esm.bundle.js"; import "framework7/css/framework7.bundle.min.css"; import 'framework7-icons'; // 若是需要F7的icon，需要安装并引入 Framework7.use(Framework7Vue); - 配置路由文件，在src下新建router文件夹，新建router.js
import Tabs from '@/views/Tabs.vue'; import Home from '@/views/Home.vue'; import About from '@/views/About.vue'; import Contact from '@/views/Contact.vue'; const routes = [ { path: '/tabs/', component: Tabs, tabs: [ // 底部Tabbar配置，这里采用路由配置，也可用其他方法，具体见参照文档 { path: '/', component: Home, id: 'home', }, { path: '/about/', component: About, id: 'about', }, { path: '/contact/', component: Contact, id: 'contact', } ] }, { path: '/actionsheet/', async(routeTo, routeFrom, resolve) { // 路由懒加载用这种方法加载页面 // dynamic import component; returns promise const vueComponent = () => import('./../components/ActionSheet.vue'); // resolve promise vueComponent().then((vc) => { // resolve with component resolve({ component: vc.default }) }); }, }, ] export default routes; 3.在App.vue里面导入router.js
<template> <f7-app :params="params"> <!-- Statusbar --> <f7-statusbar></f7-statusbar> <f7-view url="/tabs/" main :stackPages="true"></f7-view> </f7-app> </template> <script> import routes from './router/index'; export default { name: 'app', data() { return { params: { name: 'Framework7-vue', id: 'DemoApp', theme: 'ios', // 主题默认是auto, 实际上开发项目我们是需要统一主题的， routes: routes, } } } } </script> 4.Tabs.vue内容：
<template> <!-- Tabs --> <f7-page :no-navbar="true" no-swipeback> <f7-toolbar tabbar bottom labels > <f7-link tab-link="" route-tab-id="home" icon-material="home" text="Home" href="./"></f7-link> <f7-link tab-link="" route-tab-id="about" icon-material="group" text="About" href="./about/"></f7-link> <f7-link tab-link="" route-tab-id="contact" icon-material="perm_identity" text="Contact" href="./contact/"></f7-link> </f7-toolbar> <f7-tabs routable> <f7-tab id="home"></f7-tab> <f7-tab id="about"></f7-tab> <f7-tab id="contact"></f7-tab> </f7-tabs> </f7-page> </template> 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/230484.html原文链接：https://javaforall.net
