vue-cli4脚手架的简单小案例

曾经终败给现在 2023-02-16 00:43 7阅读 0赞

**小案例的效果如图：**  
![在这里插入图片描述][20200606174150161.gif_pic_center]  
**本案例是基于vue框架中的`vue-cli`脚手架建立项目文件夹，里面主要就是vue文件和一些配置文件，关键的就是路由的跳转。在这里我使用了本地存储存放注册的数据，登录时通过查询本地存储中账号密码是否对应，对应就登录成功，设置`cookie`，通过检测`cookie`是否存在，存在购物车页面和个人中心页面的内容才能被看到。**

**首先就是通过npm install -g @vue-cli安装脚手架，然后通过vue create appname 创建项目文件夹，最后通过npm run serve运行文件**

**主要代码如下：**

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import {  getCookie } from '../utils/cookie'
    
    Vue.use(VueRouter)
    
    const routes = [
      { 
        path: '/',
        name: 'Index',
        component: () => import('../views/Index.vue'),
      },
      { 
        path: '/list/',
        name: 'List',
        component: () => import('../views/List.vue'),
      },
      { 
        path: '/detail',
        name: 'Detail',
        component: () => import('../views/Detail.vue'),
        meta: { 
          isHide: true,
        }
      },
      { 
        path: '/cart',
        name: 'Cart',
        component: () => import('../views/Cart.vue'),
        meta: { 
          needLogin: true,
        },
      },
      { 
        path: '/user',
        name: 'User',
        component: () => import('../views/User.vue'),
        meta: { 
          needLogin: true,
        },
      },
      { 
        path: '/login',
        name: 'Login',
        component: () => import('../views/Login.vue'),
      },
    ]
    
    const router = new VueRouter({ 
      routes
    })
    
    router.beforeEach((to, from, next) => { 
    
      if (to.meta.needLogin) { 
        if (getCookie().login) { 
          next();
        } else { 
          next({ 
            name: 'Login',
          })
        }
      } else { 
        next();
      }
    })
    
    export default router

**上面代码主要就是路由的设置，通过设置路由，我们就可以进行跳转。`router.beforeEach((to, from, next)`是路由跳转时会执行的函数，`to`代表要跳转到哪个路由去，`from`表示从哪个路由跳转过来的，`next`代表继续执行下一步，必须要加，否则就无法执行路由的跳转。这三个参数都是形参，名字可以随便设置。**

<template>
      <div id="app">
        <div id="content">
          <router-view />
        </div>
        <div id="nav" v-show="isHide">
          <ul>
            <li>
              <router-link :to="{name:'Index',query: {}}">首页</router-link>
            </li>
            <li>
              <router-link :to="{name:'List',query: {}}">分类</router-link>
            </li>
    
            <li>
              <router-link :to="{name:'Cart',query: {}}">购物车</router-link>
            </li>
            <li>
              <router-link :to="{name:'User',query: {}}">个人中心</router-link>
            </li>
          </ul>
        </div>
      </div>
    </template>
    <script> export default { data() { return { isHide: true }; }, watch: { $route() { if (this.$route.meta.isHide) { this.isHide = false; } else { this.isHide = true; } } } }; </script>
    <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; display: flex; flex-direction: column; height: 100vh; } #content { flex: 1; overflow: auto; } #nav { height: 3rem; border-top: 0.02rem solid deeppink; } #nav a { font-weight: bold; color: #2c3e50; text-decoration: none; } #nav a.router-link-exact-active { color: hotpink; } #nav ul { list-style: none; padding: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; } </style>

**这是框架设置的Vue文件的主文件，路由的跳转我在这里通过`<router-link :to="{name:'Index',query: {}}"></router-link>`执行，其实就是a标签，`:to`就是绑定参数，这里name是设置跳转路由，跟上面的路由设置中name属性值要一样，`query，params`是vue-cli中两种不同的传参方式。**

**在这里还实现了一个功能，就是点击列表页中的产品图片跳转到详情页时，底部的导航栏会消失。**

[20200606174150161.gif_pic_center]: https://img-blog.csdnimg.cn/20200606174150161.gif#pic_center