此项目适合不会前端,不会vue的人。

不会vue真正的开发,这里用vue和vant-ui简单搭一个商城app的tabbar和页面跳转。

  • 装vue-cli3.0

  • 根据官网快速上手搭建vant项目,官网

  • 命令行vue ui开启可视化的依赖管理,(把什么bubble eslint这些没用的依赖全部删掉,转个vue-router插件,然后回到项目会自动生成views文件夹和router文件夹。

  • 在component文件夹下新建一个vue文件 TabBar.vue

    <template>
    <div id="z-tabbar">
    <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
    <van-tabbar-item icon="search" to="search">搜索</van-tabbar-item>
    <van-tabbar-item icon="shopping-cart-o" to="cart">购物车</van-tabbar-item>
    <van-tabbar-item icon="friends-o" to="me">个人中心</van-tabbar-item>
    </van-tabbar>
    </div>
    </template> <script>
    import 'vant/lib/tabbar/style';
    import 'vant/lib/tabbar-item/style';
    import Vue from 'vue';
    import { Tabbar, TabbarItem } from 'vant';
    Vue.use(Tabbar).use(TabbarItem);
    export default {
    name: "TabBar",
    data() {
    return {
    active: 0
    }
    },
    methods:{ },
    mounted() {
    var str = this.$route.path;
    //根据路由判断active
    if(str==='/'){
    this.active=0;
    }else if (str === '/search') {
    this.active = 1
    } else if (str === '/cart') {
    this.active = 2
    } else if (str === '/me') {
    this.active = 3;
    }
    }
    }
    </script>
    <style scoped>
    </style>

    在views文件夹下新建要跳转的页面对应的vue文件。

    <template>
    <div>
    <van-nav-bar title="购物车"/>
    <div>Cart</div>
    </div>
    </template> <script>
    export default {
    name: "Cart"
    }
    </script> <style scoped> </style>
    <template>
    <div>
    <van-nav-bar title="个人中心"/>
    <div>Me</div>
    </div>
    </template> <script>
    export default {
    name: "Me"
    }
    </script> <style scoped> </style>
  • 修改App.vue

    <template>
    <div id="app">
    <router-view/>
    <TabBar></TabBar>
    </div>
    </template> <style>
    </style>
    <script>
    import TabBar from "./components/TabBar";
    export default {
    components: {TabBar}
    }
    </script>
  • 修改router文件夹下的index.js文件,配置路由。

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '../views/Home.vue'
    import Search from "../views/Search";
    import Cart from "../views/Cart";
    import Me from "../views/Me"; Vue.use(VueRouter) const routes = [
    {
    path: '/',
    name: 'home',
    component: Home
    },
    {
    path: '/search',
    name: 'search',
    component: Search
    },
    {
    path: '/cart',
    name: 'cart',
    component: Cart
    },
    {
    path: '/me',
    name: 'me',
    component: Me
    },
    ] const router = new VueRouter({
    routes
    }) export default router
  • 结果

【笔记】vue实现简单项目和页面跳转的更多相关文章

  1. sharePoint中简单的父页面跳转子页面代码!

    1,SharePoint中挺简单的一个父页面跳转到子页面的Js代码!常常用到,每次都到以前的项目中去找代码,挺麻烦! (1)父页面代码. function imgAddParentclick() { ...

  2. (day68)Vue-CLI项目、页面跳转和传参、生命周期钩子

    目录 一.Vue-CLI (一)环境搭建 (二)项目的创建 (三)项目目录结构 (四)Vue组件(.vue文件) (五)全局脚本文件main.js(项目入口) (六)Vue请求生命周期 二.页面跳转和 ...

  3. angularjs项目的页面跳转如何实现

    链接:https://www.zhihu.com/question/33565135/answer/696515Angular页面传参有多种办法,根据不同用例,我举5种最常见的:PS: 在实际项目中, ...

  4. react项目中页面跳转、刷新及获取网络状态

    // 页面跳转 window.location.href = 'http://speedtest.wangxiaotong.com/' // 页面刷新 window.location.reload() ...

  5. vue路由守卫+cookie实现页面跳转时验证用户是否登录----(二)设置路由守卫

    上一篇我们已经封装好了cookie方法,登录成功之后也可以吧用户信息存到cookie中,接下来需要在router/index.js中引入一下cookie.js文件 然后继续添加以下代码 /* * be ...

  6. VUE项目实现页面跳转

    打开一个VUE项目,目录结构是这样的: 如现在有两个页面aaa和HelloWorld,路由配置在index.js中: import Vue from 'vue' import Router from ...

  7. vue 移动端项目切换页面,页面置顶

    之前项目是pc端是使用router的方式实现置顶的 //main.js router.afterEach((to, from, next) => { window.scrollTo(0, 0) ...

  8. 学习笔记-vue+quill简单的后台demo

    功能比较单一 https://github.com/opceclee/vue-quill

  9. 页面跳转(包括vue路由)

    1.JS实现页面跳转 1.1 使用window.location的href属性跳转 window.location.href = 'http://www.baidu.com';此处window可以省略 ...

随机推荐

  1. flask 第四篇 模板语言jinja2

    是时候开始写个前端了,Flask中默认的模板语言是Jinja2 现在我们来一步一步的学习一下 Jinja2 捎带手把 render_template 中留下的疑问解决一下 首先我们要在后端定义几个字符 ...

  2. Linux 下运行 class 文件

    1. 基本命令 java  -cp  searchDir  classFile -cp  searchDir : 指定从该目录搜索 class 文件 classFile :类路径(不包含 .class ...

  3. State Threads之编程注意事项

    原文: Programming Notes 1. 移植 State Thread 库可移植到大多数类 UNIX 平台上,但是该库有几个部分需要依赖于平台特性,以下列出了这些部分: 线程上下文初始化. ...

  4. 【黑马JavaSE】1.1JavaSE、环境变量、CMD使用、常量、变量、数据类型转换(自动/强制)、ASCII码表、Unicode万国码表

    文章目录 SUN公司,詹姆斯.劳瑟琳,Java祖师爷 Java语言开发环境搭建 把Java添加到环境变量的方法 命令行CMD里一些报的错误 命令控制行常用操作的代码展示 Notepad++.注释.标识 ...

  5. Linux安全工具之fail2ban防爆力破解

    一:简单介绍 fail2ban是一款实用软件,可以监视你的系统日志,然后匹配日志的错误信息(正则式匹配)执行相应的屏蔽动作 在企业中,有些很多人会开放root登录,这样就有机会给黑客造成暴力破解的机会 ...

  6. LC 965. Univalued Binary Tree

    A binary tree is univalued if every node in the tree has the same value. Return true if and only if ...

  7. Redis集群配置和常见异常解决

    前文 Redis的Cluster集群,是在分布式且开源环境下最佳的高可用解决方案,可以有效的解决服务器宕机下或高并发下,数据的完整性. 文档前提 Redis 3.0版本或更高版本.(3.0版本开始支持 ...

  8. Qt 之水平/垂直布局(QBoxLayout、QHBoxLayout、QVBoxLayout)

    简述QBoxLayout可以在水平方向或垂直方向上排列控件,由QHBoxLayout.QVBoxLayout所继承. QHBoxLayout:水平布局,在水平方向上排列控件,即:左右排列. QVBox ...

  9. react native 传值方式之 :子组件通过调用 其父组件传来的方法 传值回其父组件

  10. 【Python基础】lpthw - Exercise 46 项目骨架

    本节将会介绍如何构建一个项目骨架目录.骨架目录中会包含项目文件布局.自动测试代码.模块及安装脚本. 一.环境配置(win10) 1. 检查并确认自己只安装了一个python版本. cd ~ pytho ...