【笔记】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
  

• 结果