文章目录
第六章 element-ui(vue2)/element-plus(vue3)
-
安装：
npm element-plus --save -
在main.js中完整引入：
import ElementPlus from 'element-plus'引入库import 'element-plus/dist/index.css'引入样式app.use(ElementPlus)app使用
-
按需导入
-
安装插件
npm install -D unplugin-vue-components unplugin-auto-import -
添加配置：在项目根目录下新建vue.config.js可以在其中进行webpack配置，添加如下代码：
const AutoImport = require('unplugin-auto-import/webpack') const Components = require('unplugin-vue-components/webpack') const { ElementPlusResolver } = require('unplugin-vue-components/resolvers') module.exports = { configureWebpack:{ plugins: [ // ... AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], } }
-
第七章 vue-router
7.1 路由的实现
7.1.1MVC及MVVM架构下的路由
- 后端路由：服务器根据请求的 URL 路径来确定执行哪个控制器或处理函数。
- 服务器根据预先定义的路由规则对请求的 URL 路径进行匹配，确定要执行的控制器或处理函数。
- 控制器或处理函数负责处理请求、处理业务逻辑、获取数据等，并生成最终的响应。
- 响应会返回给客户端，客户端根据响应进行相应的处理。
- 前端路由：前端路由主要通过监听浏览器 URL 的变化来确定当前渲染哪个视图或组件。
- 当用户在浏览器中输入 URL 或点击链接时，前端代码会监听浏览器 URL 的变化
- 根据预定义的路由规则（如 URL 路径与对应的视图或组件的映射关系）来匹配当前的 URL
- 根据匹配结果，前端代码会选择加载和渲染相应的视图或组件
7.1.2 vue路由实现
-
安装路由
-
main.js引入路由功能
创建路由器实例
-
路由注册src->router->index.js
创建路由映射
（新建立的页面级组件一般放入src->-views目录下）
-
使用v-link指令
app.vue包含页面级组件
使用标签
<router-link to="路径"></router-link>也可以直接创建链接标签，设置
href属性值，点击链接可以实现页面切换安装路由时选择历史模式，就可以使用BOM中的历史对象，实现页面的前进和后退
-
<router-view/>渲染页面组件启动路由
app根据路由规则加载不同的页面组件
7.2 延迟加载动态导入（懒加载）
-
（打包后）每个页面有自己的js文件，访问相应页面按需加载相应的js文件，提高效率
-
在路由设置
index.js中进行设置，关键就在于通过函数导入组件-
方式一：
或者使用箭头函数
component: ()=>import('../views/AboutView.vue') -
方式二：
声明函数变量导入
import { createRouter, createWebHistory } from 'vue-router' const UserView = ()=> import("../views/UserView.vue"); const routes = [ { path: '/user', name: 'user', // component: UserView component: UserView } ]
-
7.3 路由模式解析
路由模式指用于管理前端页面导航和路由的方式，定义了如何根据不同的URL路径加载不同的组件，并控制页面切换和状态管理，
createWebHasHistoryHash哈希模式是VueRouter默认的路由模式，使用URL的哈希部分#来管理路由状态createWebHistotyHistory历史模式使用 HTML5 History API 来管理路由状态，不包含哈希字符。需要服务器配置以支持直接访问 URL。createMemoryHistoryAbstract内存模式将路由状态保存在内存中，不依赖浏览器 URL 或 HTML5 History API。主要用于非浏览器环境或独立于 URL 进行路由管理的情况，如服务器端渲染（SSR）。
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes: [
// 定义路由配置
{ path: '/home', component: Home },
{ path: '/about', component: About }
]
});
//使用createWebHistory创建了一个基于History模式的路由历史对象，并将其作为选项传递给createRouter函数
7.4 全局变量
-
全局变量也就是main.js中的App中的成员属性，所有组件都可以访问的成员
-
app中的全局变量，在子组件中可以直接调用，页面(view)使用插值语法时直接变量名前加
$，在js(model)中访问使用this.$...或$...是否需要加上
this取决于变量的作用域和定义方式- 如果全局变量是通过Vue实例的**
data属性定义**的，那么在子组件中访问时需要使用this关键字 - 如果全局变量是在Vue实例外部定义的（例如在Vue实例之前的脚本中），则可以直接在子组件中访问，无需添加
this关键字
//vue实例前的脚本中定义变量 const app ={ $emit, $route, $router }//页面级组件中 mounted(){ //打印自己的变量 console.log(this.msg); //打印全局变量 console.log($route); console.log($router); } - 如果全局变量是通过Vue实例的**
-
$route当前路由，可以获取当前路由的信息（path,参数）{{$route.query}}<br> {{$route.query.username}}<br> {{$route.query.page}}<br> {{$route.fullPath}}<br> {{$route.path}}<br> -
$router路由器，使用它的方法转向其他的位置，可以带参数跳转<button @click="$router.go()"> 个人中心 </button> <button @click="$router.back()"> 个人中心 </button> <button @click="$router.push('/user')"> 个人中心 </button> <button @click="$router.go(-1)"> 返回 </button> <button @click="$router.push({path:'/user',query:{username:'ddd',page:'110'}})"> 个人中心 </button>
7.5 嵌套路由
-
/传参{ // 这样访问/user需要加“/参数”才会访问到该页面 path: '/user:id', name: 'user', // component: UserView component: UserView },//页面组件模板可以获取参数 {{$route.params.id}} -
选项卡
- 设置连接
- 点击链接对一些元素样式发生改变（隐藏/显示）
display:nonedisplay:block
-
嵌套路由
-
路由配置文件
index.js,导入子组件，在“父路由”下添加子路由//导入 const MyCollect = ()=>import("../views/user/MyCollection.vue"); const MyCourse = ()=>import("../views/user/MyCourse.vue"); const MyOrder = ()=>import("../views/user/MyOrder.vue");//路由中添加子路由 { path: '/user3', name: 'user3', // component: UserView component: UserView3, children:[ { path:'collect', name:'collect', component:MyCollect, }, { path:'order', name:'order', component:MyOrder, }, { path:'course', name:'course', component:MyCourse, } ] }, -
"父"组件中添加链接和
<router-view/><template> <div class="user"> <div class="header"> <h1>这是个人中心页面（大组件）</h1> </div> <nav> </nav> <div class="menu"> <a href="/user3/course">我的课程</a><br> <a href="/user3/collect">我的收藏</a><br> <a href="/user3/order">我的订单</a><br> </div> <div class="main"> <router-view/> </div> </div> </template>
-
7.6 重定向和别名
-
重定向：
- 在routes配置中完成，要从重定向/a到/b
const routes=[{path:'/home',redirect:'/'}]const routes = [{path:'/home',redirect:{name:'homepage'}}]path:'/searchText',redirect:to=>{return {path:'/search',query:{q:to.params.searchText}}},
-
别名：
- 别名
/as/home表示用户访问url为/和/home时匹配内容一样 const routes = [{path:'/',component:Homepage,alias:'/home'}]alias:['people','list']可以用数组方式起多个别名alias:['/:id','']
- 别名
7.7 导航守卫
是一组用于在路由导航过程中进行控制和拦截的钩子函数。可以在路由跳转前、跳转后以及跳转出错时执行相应的逻辑，用于对路由进行权限认证、数据预加载、页面切换动画等操作
-
前置守卫
-
to: Route: 即将要进入的目标路由对象 -
from: Route: 当前导航正要离开的路由 -
router.beforeEach((to,from)=>{//...return false})从…到…参数是一个回调函数
-
-
后置钩子
router.afterEach((to,from)=>{}) -
有多种机会植入到路由导航过程中：全局的，单个路由路由独享的，或组件级的
- 全局导航守卫，作用于整个应用的路由跳转过程，写在
index.js创建的路由对象中beforeEach(to,from,next)每次路由跳转前执行，可用来进行权限验证或重定向afterEach(to,from)每次跳转后执行，可用于日志记录或页面统计beforeResolve(to,from,next)所有组件内守卫和异步路由组件被解析之后，导航被确认之前
- 路由独享的守卫，作用于特定的路由上
beforeEnter(to,from,next)进入某个特定路由前执行
- 组件内的守卫，作用于单个组件内部的路由跳转过程
beforeRouteEnter(to,from,next)进入组件前执行，可以用于获取异步数据或进行动态路由配置beforeRouteUpdate(to,from,next)当前组件复用时执行，可以用来对路由参数的变化作出响应beforeRouteLeave(to,from,next)离开当前组件前执行，可以用来确认提示或保存用户输入
- 全局导航守卫，作用于整个应用的路由跳转过程，写在
863
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
