Vue2下篇

 插槽：

基本插槽：

普通插槽：父组件向子组件传递静态内容。基本插槽只能有一个slot标签，因为这个是默认的位置，所以只能有一个

<!-- ParentComponent.vue -->
<template>
<ChildComponent>
<p>This is passed from parent</p>
</ChildComponent>
</template><!-- ChildComponent.vue -->
<template>
<div>
<slot></slot> <!-- 插槽位置 -->
</div>
</template>

命名插槽：

如果你希望在同一个子组件中传递多个内容，可以通过命名插槽来实现。命名插槽允许父组件向子组件传递不同的内容并指定插槽的位置。

<!-- ParentComponent.vue -->
<template>
<ChildComponent>
<template v-slot:header>
<h1>This is the header</h1>
</template>
<template v-slot:footer>
<p>This is the footer</p>
</template>
</ChildComponent>
</template><!-- ChildComponent.vue -->
<template>
<div>
<header><slot name="header"></slot></header> <!-- 命名插槽 -->
<main>Content of the child component</main>
<footer><slot name="footer"></slot></footer> <!-- 命名插槽 -->
</div>
</template>

作用域插槽：

作用域插槽（也叫做“作用域插槽”）是一种更强大的插槽功能，它让父组件能够通过插槽访问子组件的数据或方法。通过作用域插槽，父组件可以传递一个模板，并且可以访问子组件中的数据。

<!-- 父组件 -->
<ListComponent :items="['Apple', 'Banana', 'Cherry']"><template v-slot:default="{ item }"><li>{{ item }}</li></template>
</ListComponent><!-- 子组件 -->
<template><ul><slot v-for="item in items" :item="item"></slot></ul>
</template><script>
export default {props: {items: Array,},
};
</script>

路由：

1.router-link路由跳转：

<router-link :to="/find"> </router-link>  是 Vue Router 提供的组件，它的主要功能是实现 SPA（单页应用）中的路由导航。当用户点击 <router-link> 时，它不会像普通的<a href>标签那样触发页面的完全刷新而是通过 Vue Router 的内部机制，根据路由配置更新当前页面的部分内容，实现页面的局部更新，提供了更流畅的用户体验，避免了传统多页应用中页面跳转带来的白屏和加载延迟等问题。

可以方便地传递路由参数，例如<router-link :to="{name: 'user' ,params: {userId: 123}}">通过name属性和params对象，可以传递参数到目标路由，目标路由可以根据这些参数动态地显示相应内容。

 

使用路由查询传参的方法：

1. 在 <router-link> 中使用查询参数：

<router-link :to="{ path: '/user', query: { id: 123, name: 'John' }}">
用户信息
</router-link>

:to 是 Vue 的动态绑定语法，这里绑定的是一个对象。 

2.路由出口：

显示跳转页面的对应的组件显示部分

router-view是 Vue Router 提供的一个组件，用于显示当前路由对应的组件内容。当用户点击footer_warp中的 router-link 进行导航时，根据路由配置，对应的组件会在这里渲染。例如，如果用户点击发现音乐链接，路由会将/find路径对应的组件渲染到这个router-view中；如果点击我的音乐链接，会将/my路径对应的组件渲染到router-view中，以此类推。

 

使用动态数据作为 include 属性：

<template><keep-alive :include="keepArr"><router-view></router-view></keep-alive>
</template>
<script>
export default {data() {return {keepArr: ['HomeComponent', 'AboutComponent']};}
};
</script>

• 在这个示例中，keepArr 是一个数组，存储了需要被缓存的组件名称。
• 可以动态地修改 keepArr 数组，例如通过方法添加或删除元素，来控制哪些组件被缓存。
• 当 router-view 中的组件名称在 keepArr 数组中时，该组件会被 keep-alive 缓存，例如当路由切换到 HomeComponent 或 AboutComponent 时，这些组件会被缓存。

 3.route路由参数：

export default {
name: 'UserComponent',
created() {
// 获取查询参数
const id = this.$route.query.id;
const name = this.$route.query.name;
console.log(id, name);
}
};

 4.导入方式：

静态导入：

import User from '@/views/layout/user.vue';

这种导入方式是静态导入，在 JavaScript 文件加载时，这些模块会被立即导入。

缺点：会增加初始加载时间和包的大小。这是因为在这种情况下，初始的包会包含所有导入的模块和组件代码，即便其中某些组件可能不会被立即使用。

 

动态导入：

const Prodetail = () => import('@/views/prodetail');

这种导入方式是动态导入，使用函数调用 import()，它返回一个 Promise，会在函数被调用时才开始导入模块。

优点：可实现懒加载，减少初始包的大小，进而提高应用的初始加载速度，适用于一些不常用的页面或组件。能够根据用户的操作或路由导航动态加载模块，优化性能。

import Vue from 'vue'
import VueRouter from 'vue-router'
// 这个效果和后面加上login/index.uve是一样的
import Layout from '@/views/layout'
import Home from '@/views/layout/home.vue'
import Category from '@/views/layout/category.vue'
import Cart from '@/views/layout/cart.vue'
import User from '@/views/layout/user.vue'
import store from '@/store'const Login = () => import('@/views/login')
const SearchIndex = () => import('@/views/search/index.vue')
const Pay = () => import('@/views/pay')
const Prodetail = () => import('@/views/prodetail')Vue.use(VueRouter)const router = new VueRouter({routes: [{ path: '/login', component: Login },{path: '/',// 添加重定向redirect: '/home',component: Layout,children: [{ path: '/home', component: Home },{ path: '/category', component: Category },{ path: '/cart', component: Cart },{ path: '/user', component: User }]},{ path: '/pay', component: Pay },// 动态路由传参{ path: '/prodetail/:id', component: Prodetail },{ path: '/searchIndex', component: SearchIndex }]
})
export default router

重定向：

{ path: '/', redirect: '/home' }：当用户访问根路径 / 时，会自动重定向到 /home 路径。这里的重定向是静态的，因为重定向的目标是固定的 /home 路径，不会根据用户状态或其他条件而改变。

导航守卫：

每次跳转页面前触发，进行一下路由处理 

// 所有的路由在真正被访问到之前（解析渲染对应组件前），都会先经过全局前置守卫// 全局前置导航守卫
// to: 到哪里去，到哪里的路由信息对象（路径，参数）
// from: 从哪里来，从哪里来的完整路由信息对像，（路径，参数）
// next() 放行 放行到to要去的路径
// next(路径) 进行拦截，拦截到next里面配置的路径// 定义一个数组，专门用户存放所有需要权限访问的页面
const authUrls = ['/pay', '/myorder']
router.beforeEach((to, from, next) => {const token = store.getters.token// 如果是非权限页面，直接放行if (!authUrls.includes(to.path)) {return next()}// 如果是权限页面if (token) {next() // 有 token 放行} else {// 无 token，跳转到登录页next('/login')}
})

自定义指令：

局部自定义指令：

directives: {...}：在组件的 directives 属性中注册自定义指令。

'local-focus'：自定义指令的名称，使用时为 v-local-focus。

<template><div><input v-local-focus type="text" /></div>
</template><script>
export default {directives: {'local-focus': {inserted: function (el) {el.focus();}}}
};
</script>

全局自定义指令：

直接将指令定义在main.js文件当中

Vue.directive('focus', {inserted: function (el) {el.focus();}
});

 带有参数的指令：

<!-- 使用带有普通参数的自定义指令 -->
<input type="text" v-color:red>directives: {color: {bind: function (el, binding) {// 获取参数const color = binding.arg; el.style.color = color;}}}