vue项目、路由

目录

• Vue项目创建
• pycharm配置并启动vue项目
• vue项目目录结构分析
• js原型补充
• vue项目生命周期
• 页面组件
• 配置自定义全局样式
• 路由逻辑跳转
• 路由重定向
• 组件的生命周期钩子
• 路由传参

Vue项目创建

1) 进入存放项目的目录
>: cd vue_project

2) 创建项目
>: vue create v-proj

3) 项目初始化

• 输入npm run serve 初始化项目

pycharm配置并启动vue项目

1) 用pycharm打开vue项目
2) 添加配置npm启动

vue项目目录结构分析

├── v-proj
|	├── node_modules  	// 当前项目所有依赖，一般不可以移植给其他电脑环境
|	├── public
|	|	├── favicon.ico	// 标签图标
|	|	└── index.html	// 当前项目唯一的页面
|	├── src
|	|	├── assets		// 静态资源img、css、js
|	|	├── components	// 小组件
|	|	├── views		// 页面组件
|	|	├── App.vue		// 根组件
|	|	├── main.js		// 全局脚本文件（项目的入口）
|	|	├── router
|	|	|	└── index.js// 路由脚本文件（配置路由 url链接 与 页面组件的映射关系）
|	|	└── store
|	|	|	└── index.js// 仓库脚本文件（vuex插件的配置文件，数据仓库）
|	├── README.md
└	└── package.json等配置文件

js原型补充

function A() {}

let a1 = new A();
let a2 = new A();

// 为A类添加原型   类似于类属性
A.prototype.num = 100;

console.log(a1.num);
console.log(a2.num);

// ES6语法下的类
class B {
    constructor(name) {
        this.name = name
    }
}

let b1 = new B('cwz');
let b2 = new B('neo');
B.prototype.count = 666;
console.log(b1.count);
console.log(b2.count);

console.log(b1.name);
console.log(b2.name);

vue项目生命周期

全局脚本文件main.js 文件入口

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app');

改为：

// 项目一启动，加载一堆环境
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

// 创建根组件
new Vue({         // 挂载、 渲染挂载点
   el: '#app',
    router: router,   // 把路由、仓库配置到vue对象中
    store: store,
    render: function (read_vue_fn) {
        return read_vue_fn(App)
    }
});

• 启动项目，加载主脚本文件 mian.js，加载vue环境， 创建根组件完成渲染；加载系统已有的第三方环境：router、store；加载自定义的第三方环境与自己配置的环境，后期项目不断添加

• router被加载，就会解析router文件夹下的index.js脚本文件，完成路由-组件 的映射关系

• 新建视图组件.vue（在views文件夹中）, 在路由中配置（在router的index.js中），设置路由跳转（在导航栏组件中）

  <router-link to="/user">去用户页面</router-link>  完成标签跳转
  
  this.$router.push('/user')   完成逻辑跳转
  

页面组件

views文件夹下新建Home.vue

<!--
template标签负责组件的html结构，有且只有一个根标签
-->

<template>
    <div class="home">
        <h1>主页</h1>
        <hr>
        <Nav></Nav>
    </div>
</template>

<!--
script标签负责组件的js逻辑：逻辑固定导出（外界才可以导入）
-->
<script>
    import Nav from '../components/Nav'

    export default {
        data() {
            return {}
        },
        methods: {},
        components: {
            Nav,
        }
    }
</script>

<!--
style标签负责组件的css样式:  scoped保证样式的组件化   样式只在该组件内部起作用
-->
<style scoped>

</style>

根组件 App.vue：

<template>
    <div id="app">
       <!--页面组件占位符-->
        <router-view/>
    </div>
</template>

配置自定义全局样式

在mian.js中配置：

// 配置全局样式  @就代表src文件夹的绝对路径
// import '@/assets/css/global.css'
// import './assets/css/global.css'
require('./assets/css/global.css');   // 官方提倡required加载静态文件

路由逻辑跳转

this.$router     控制路由跳转
this.$route      控制路由数据
this.$router.push('/')  往下再跳转一页
this.$router.go(-2)    go是历史记录前进后退， 正为前进，负为后退，数字为步数

// router文件夹 index.js中
const routes = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
      path: '/course',
      name: 'course',
      component: Course
    },
]

// 其中name的用法：
<router-link :to="{name: 'course'}">课程页</router-link>

路由重定向

const routes = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
      path: '/home/',
      redirect: '/',
    },
]

组件的生命周期钩子

• 一个组件从创建到销毁的众多时间节点回调的方法
• 这些方法都是vue组件 实例的成员
• 生命周期钩子的作用就是满足不同时间节点需要完成的事

new Vue({
    el: "#app",
    data: {
        msg: "message"
    },
    beforeCreate () {
        console.log("组件要创建了");
        console.log(this.msg);

    },
    created () {   // 在该钩子中完成后台数据的请求
        console.log("实例创建成功, data, methods已拥有");
        console.log(this.msg);
    },
    beforeMount() {
        console.log("组件准备加载")
    },
    mounted () {  // 特别耗时的数据请求，可以延后到组件初步加载成功，再慢慢请求
        console.log("组件加载完成");
    },
    destroyed() {
        console.log("组件销毁成功了")
    }
    // 拿到需求 => 确定钩子函数 => 解决需求的逻辑代码块
})

路由传参

第一种：

{
	path: '/course/detail',
	name: 'course-detail',
    component: CourseDetail
}
{
	path: '/detail',
    redirect: '/course/detail'
}
this.$router.push('/course/detail');
this.$router.push('/course/detail?pk=1');  => this.$route.query.pk

第二种：

{
	path: '/course/detail/:pk',
	name: 'course-detail',
    component: CourseDetail
}
this.$router.push('/course/detail/10');  => this.$route.params.pk