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