Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参
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
Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参的更多相关文章
- vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同
import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...
- vue环境配置脚手架搭建,生命周期,钩子
Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...
- Vue.js的指令、生命周期钩子与数据选项
vue.js官网:https://cn.vuejs.org/v2/guide/components-registration.html 一.常用指令 v-if ... v-else: 作用:控制元素是 ...
- vue 生命周期钩子 路由钩子 动画钩子 执行顺序
进入首页的钩子们 1 路由钩子 路由跳转前beforeEach 2 路由钩子 home组件内部:守卫执行前beforeRouteEnter 3.路由钩子 路由跳转后afterEach 4 生命周期 h ...
- vue使用填坑之生命周期钩子的 this 上下文
每个Vue实例在被创建的时候都需要经过一系列的初始过程,如设置数据监听,编译模版,将实例挂载到DOM并在数据变化的时候更新DOM.在这个过程中,也会运行一些叫生命周期钩子的函数.如created, m ...
- Vue之路由跳转 传参 aixos 和cookie
一.路由跳转 1.1 项目的初始化 vue create m-proj >>>创建vue项目 精简vue项目的 views 视图 About(基本是删除的) Home.(可以 ...
- vue 路由跳转传参
<li v-for="article in articles" @click="getDescribe(article.id)"> getDescr ...
- vue 中 this.$router.push() 路由跳转传参 及 参数接收的方法
传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用name ...
- vue路由跳转传参
this.$router.push({ path: '/message/result_notice', query: { id: id } }) // let type = this.$route.n ...
随机推荐
- MySQL Error Log 中IO写入瓶颈的警告分析
周末在一台MySQL实例上频繁做大批量的写入测试,无意中发现MySQL的errorlog中频繁出现如下的Note:page_cleaner: 1000ms intended loop took *** ...
- python判断文件的访问权限
os.access(file, mode)判断文件的访问权限file为文件mode为操作模式,有这么几种:os.F_OK: 检查文件是否存在;os.R_OK: 检查文件是否可读;os.W_OK: 检查 ...
- 图片转换成base64
let bgcImage = 'http://192.168.0.83:9080/files/4a9c3056-9b9b-4b41-b8e2-fd9f27023c41.jpg' let image = ...
- Spring afterPropertiesSet方法
1.init-method方法,初始化bean的时候执行,可以针对某个具体的bean进行配置.init-method需要在applicationContext.xml配置文档中bean的定义里头写明. ...
- 第04组 Beta版本演示
小组信息 组名:斗地组 组长博客:地址 组内成员: 组员 学号 林涛(组长) 031702616 童圣滔 031702117 林红莲 031702213 潘雨佳 031702214 覃鸿浩 03170 ...
- ReactNative: 使用标签栏组件TabBarIOS组件
一.简介 标签栏Tab的作用对于应用程序那是不言而喻的,它是应用程序中除了导航栏组件外的又一个核心组件,使用它可以实现页面的切换.RN提供了一个TabBarIOS组件来完成页面的切换(视图或者路由), ...
- yii2 提示
控制器中: Yii::$app->getSession()->setFlash('success', "描述!"); Yii::$app->getSession( ...
- C++如何使用宏定义来简化代码性能测试 | cpp macro like function to implement a performance profiler
本文首发于个人博客https://kezunlin.me/post/65dc693d/,欢迎阅读最新内容! cpp macro like function to implement a perform ...
- git commit vim报错
window平台,使用git bash,填写git commit时,退出时vim报错: 错误信息 启动失败 Vim: Caught deadly signal SEGV 在工程目录下,进.git目录, ...
- Django路由系统的简介与使用
Django的路由系统 Django 1.11版本 URLConf官方文档 URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL 与 为该URL调用的视图函数之间的映射表. ...