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

目录

• Vue组件文件微微细剖
• Vue组件生命周期钩子
• Vue路由
  • 1.touter下的index.js
  • 2.路由重定向
  • 3.路由传参数
  • 补充:全局样式导入
• 路由跳转
  • 1. router-view标签
  • 2. router-link标签
  • 3.逻辑跳转
    • this.$router 控制路由跳转
    • this.$route 控制路由数据

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