0830总结

Vue-CLI 项目中相关操作

一.前台路由的基本工作流程

目录结构

|vue-proj
|	|src
|	|	|components
|	|	|	|Nav.vue
|	|	|views
|	|	|	|PageFirst.vue
|	|	|	|PageSecond.vue
|	|	|App.vue
|	|	|router.js

App.vue：根组件

Nav.vue：小组件

PageFirst.vue：页面组件

PageSecond.vue：页面组件

router.js：路由配置

import Vue from 'vue'
import Router from 'vue-router'
import PageFirst from './views/PageFirst'
import PageSecond from './views/PageSecond'

Vue.use(Router);

export default new Router({
    mode: 'history',  // 组件更换模拟页面转跳形成浏览器历史记录
    base: process.env.BASE_URL,
    routes: [
        // 路由就是 url路径 与 vue组件 的映射关系
        // 映射出的组件会替换 根组件 中的 router-view 标签
        // 通过 router-link 标签完成 url路径 的切换
        {  
            path: '/page-first',
            name: 'page-first',
            component: PageFirst
        },
        {
            path: '/page-second',
            name: 'page-second',
            component: PageSecond
        },
    ]
})

二.配置全局样式文件

目录结构

|vue-proj
|	|src
|	|	|assets
|	|	|	|css
|	|	|	|	|global.css
|	|	|main.js

global.css

html, body, h1, ul {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
    color: black;
}

/* router-link标签激活状态拥有的类名 */
.router-link-exact-active.router-link-active {
    color: greenyellow;
    border-bottom: 2px solid greenyellow;
}

main.js

// 新增内容
// 配置全局css
import '@/assets/css/global.css'

三.组件生命周期钩子

概念

一个组件从创建到销毁，整个过程中的特殊的时间节点回调的方法，称之为生命周期钩子

如：一个组件创建成功就会回调 created方法，内部数据要更新和更新完毕分别调用 beforeUpdate方法与updated方法

案例

四.路由重定向

router.js

import Vue from 'vue'
import Router from 'vue-router'
import PageFirst from './views/PageFirst'
import PageSecond from './views/PageSecond'
import Course from './views/Course'

Vue.use(Router);

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/page-first',
            name: 'page-first',
            component: PageFirst
        },
        {  // 重定向路由的两种方式
            path: '/page/first',
            // redirect: {'name': 'page-first'},
            redirect: '/page-first'
        },
    ]
})

五.页面组件小组件综合案例

目录结构

|vue-proj
|	|src
|	|	|components	 小组件
|	|	|	|CourseCard.vue
|	|	|views  页面组件
|	|	|	|Course.vue
|	|	|router.js

CourseCard.vue

CourseCard.vue

router.js

import Vue from 'vue'
import Router from 'vue-router'
import PageFirst from './views/PageFirst'
import PageSecond from './views/PageSecond'
import Course from './views/Course'

Vue.use(Router);

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/page-first',
            name: 'page-first',
            component: PageFirst
        },
        {
            path: '/page/first',
            // redirect: {'name': 'page-first'},
            redirect: '/page-first'
        },
        {
            path: '/page-second',
            name: 'page-second',
            component: PageSecond
        },
        {
            path: '/course',
            name: 'course',
            component: Course
        },
    ]
})