前端开发 一月 14, 2020

vue学习笔记(二)

文章字数 5.1k 阅读约需 5 mins. 阅读次数 0

vue学习笔记(一)

前言:

简单研究了一天VUE框架,然后单手撸了一个前端模板,算是半成品吧,其中了解了前端路由,以及组件式的开发模式,简要记录一下吧。

vue-router

SPA简介:

SPA(single page application):单一页面应用程序,只有一个完整的页面;它在加载页面时,不会加载整个页面,而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是:更新视图而不重新请求页面;vue-router在实现单页面前端路由时,提供了两种方式:Hash模式和History模式。

Hash模式我没怎么用,多是使用History模式,这两种的模式具体可参考SPA(single page application)[单页面应用]

vue-router具体使用

配置路由

vue-router-配置

其实很简单,我们安装好vue-router后,在router文件夹里面的index.js就可以配置路由视图,推荐使用vue-ui来安装,会自动生成该文件同时附带示例。

具体解释看下方代码注释

import Vue from 'vue'
import VueRouter from 'vue-router'
// 
// 
Vue.use(VueRouter)
// 
import Layout from '@/layout/index' // 这里使用正常的加载组件的模式
// 
const routes = [
  {
    path: '/', //路由路径 相当于https://localhost:8080/#/
    name: 'layout', // 路由名字,在其他组件里面,可以使用 this.$route.name 来获取当前路由的名字
    component: Layout, //该路由加载的组件
    redirect: '/index', // 这里我使用重定向功能 来跳转至 ~/#/index
    children: [ //配置子路由
        {
            path: 'index', // 子路由路径 相当于/#/index 注意前面的'/'会自动加上,所以我们配置该字段时不用加
            name:    'Index', // 路由名字
            component: () => import('@/views/index/index'), //这里使用懒加载的模式,就是访问到该路由时,才加载组件
            meta: { title: 'index' } // 可以理解为该路由携带的信息
        }
    ]
  }
]

使用路由视图

其中可以发现我路由配置出了Layout组件在layout文件夹下,其余全在views文件下,这个就是利用路由来布局页面,之前刚学习的时候不是态度,学习了许多别人项目结构布局才突然领悟到这点, 这里给出我的项目结构:

|---src   #源代码文件夹
----|---assets  #静态资源文件夹,比如图片子类的
----|---components  #全局组件文件夹
----|---layout  #布局文件夹
--------|---components   #存放布局相关的组件
--------|---index.vue   #布局组件
----|---plugins   #插件目录 这里主要方便统一维护插件
--------|---axios.js  #使用网络发包的插件
--------|---element.js  #使用element.js的组件
----|---router  #路由文件夹
--------|---index.js  #路由配置文件
----|---store
----|---styles   #全局样式文件夹
----|---views  #视图文件夹
----|---App.vue  #组件入口
----|---main.js  #全局入口
----|---settings.js #全局设置

基本大题框架如此,不得不说,框架模式下的开发,相对效率会快很多,而且多人协作模式下,更能统一接入口,极大提高开发效率

配置好路由后,我们在Layout文件夹下使用路由来作布局

<!-- @/layout/index.vue -->
<template>
    <div class="layout">
        <el-container>
            <el-header class="global-layout">
                <lay-navbar></lay-navbar>
            </el-header>
            <el-main class="global-layout main-container">
                <app-main></app-main>
            </el-main>
        </el-container>
        <div class="footer footer-line">
            <lay-footer></lay-footer>
        </div>
    </div>
</template>

其中app-main组件就是我们页面中部的呈现位置,代码如下

<!-- @/layout/components/AppMain.vue -->
<template>
    <div id="app-main">
        <transition name="el-fade-in-linear">
            <keep-alive>
                <router-view :key="key" />
            </keep-alive>
        </transition>
    </div>
</template>
<!--  -->
<script>
    export default {
        name: 'AppMain',
        computed: {
            key() {
                return this.$route.path
            }
        },
        methods:{
            Click: function(){
                console.log(this.$route);
            }
        }
    }
</script>

这里我们就使用<router-view :key="key" />,以及通过computed里面来通过this.$route.path的改变来改变key值使得组件得以动态加载,配合动画效果就能做到页面的无缝切换。

撸了两天的效果图:
E-CTF

关于路由的安全性问题

待更新…

结束语

哈,我本身以后的方向不打算做前端开发,所以也并没有太过深入的去了解vue框架的使用,仅仅只是需要撸一套简单CTF靶场出来给社团用,所以顺手学习一下vue,以及基于其的开发模式,实际上动态加载组件这一块,个人感觉有点类似ajax动态加载html页面,不过其使用的前端路由,不用发起网络请求,优点就是极大的提升了用户体验,不过不利于seo优化,因为编译出来的东西就一个html,其余全靠js,不过用来做app模式,小程序模式的开发,倒是效果与效率都不错

0%