Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参

时间:2021-06-05 01:02:30

Vue组件文件微微细剖

组件在view

文件中创建 如果需要用到其他小组件可以 在 component文件中创建并导入

view文件下:

<template>
<div class="home">
<Nav /> <!--从component中导入的小组件-->
<h1>主页</h1>
</div>
</template>
<!--template标签负责组件的html结构:有且只有一个根标签-->

export default

// script标签负责组件的js逻辑:逻辑固定导出 export default {组件内容}(外界才可以导入)
    import Nav from '../components/Nav' // 导入 组件 并且注册

    export default {
data(){ // 组件化
return {
back_data: ''
}
},
methods: {},
components: {
Nav, // 注册
},}

scoped

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

Vue组件生命周期钩子

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

例子:

// 直接写在export default 里面 

beforeCreate() {
console.log('Home组件要创建了');
console.log(this.back_data);
},
created() { // 重要方法:在该钩子中完成后台数据的请求 *****
console.log('Home组件创建成功了');
// 前后台开发时,是从后台请求数据
console.log(this.back_data);
},
beforeMount() {
console.log('Home组件准备加载')
},
mounted() { // 特别耗时的数据请求,可以延后到组件初步加载成功后,再慢慢请求
console.log('Home组件加载完成')
},
destroyed() {
console.log('Home组件销毁成功了')
}

Vue路由

1.touter下的index.js

const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]

例如我们想要添加一条路由指向一个子组件 那么我们就可以 1.导入 2.写入 案例:

import Course from '../views/Course'  // 导入组件
const routes = [
path:'/course',
name:'course',
component:Course // 路由/course指向Course
]

2.路由重定向

    {
path: '/home',
redirect: '/', // 路由的重定向
},

3.路由传参数

    {
// 第一种路由传参
path: '/course/:pk/detail',
name: 'course-detail',
component: CourseDetail
}
// 第二种路由传参 拼接参数
<router-link :to="`/course/detail?pk=${course.id}`"> </router-link>

补充:全局样式导入

require

 // 前台逻辑中加载静态资源采用require!!!!!!!!!!

// 补充:导入的注意事项
// 配置全局样式:@就代表src文件夹的绝对路径,官方提倡require加载静态文件
// import '@/assets/css/global.css'
require('@/assets/css/global.css');
img: require('@/assets/img/002.jpg'),
// 同时 只要是导入都适用@为绝对路径

路由跳转

1. router-view标签

<!--App.vue中 适用router-view实现了不同页面的渲染跳转-->
<template>
<div id="app">
<!--页面组件占位符-->
<router-view></router-view>
</div>
</template>

2. router-link标签

<!--可以用 <router-link to="/user">用户页</router-link>完成标签跳转-->
<router-link to="/">主页</router-link>
<!--或者使用name来指定 router中写的name-->
<router-link :to="{name: 'course'}">课程页</router-link>

3.逻辑跳转

this.$router 控制路由跳转

this.$router.push('/');  // 往下再跳转一页
this.$router.push({name:"router中起的name"}); // 解析router中的name并跳转

携带参数:

this.$router.push({name: '路由名', query: {xxx:'xxx'}}); // 添加 ?xxx=xxx参数
this.$router.push({name: '路由名', params: {xxx:'xxx'}}); // 添加 分组传参

this.$router.go(2);  // go是历史记录前进后退,正为前进,负为后退,数字为步数

this.$route 控制路由数据

this.$route.path;  // 获取当前路径

this.$route.query;  // 获取?xxx=xxx后携带的参数
/course/detail?pk=2

this.$route.params;  // 获取分组后的参数
/course/:pk/detail