目录
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
来源: http://www.bubuko.com/infodetail-3340334.html