【笔记】vue实现简单项目和页面跳转

此项目适合不会前端，不会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

结果