记录Vue项目开发过程中遇到的知识点（待更新）

怼烎@ 2022-10-18 15:58 236阅读 0赞

### Vue知识小梳理 ###

*   *  场景一：设置全局样式之背景色
     *  场景二：动态切换:src和:class
     *  场景三：路由跳转
     *  场景四：路由守卫（官网称：“导航守卫”）
     *  场景五：路由嵌套（官网称：“嵌套路由”）

> 一个人可以失败许多次，但是只要他没有开始责怪别人，他还不是一个失败者。

## 场景一：设置全局样式之背景色 ##

> 1. 提出疑问： 在Vue中，我们都知道每一个.vue组件，又可以称之“单页面组件”，若需要给单页面设置背景色，是否可以在组件内的template的容器中，设置背景颜色就可以呢？这肯定是不够的。  
> ![在这里插入图片描述][2021070816471011.png]  
> 2. 解决疑问： 每一个由我们创建的单页面组件，其实它并不是真正独立的一个页面，为什么？  
> \*  打开你的单页面界面，通过浏览器的控制台，查看单页面的element的结构，是不是最外层有一个`<div id=“app”>`，这个容器包裹着你的单页面，也就是我们项目目录中的App.vue  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70]
> 
> 3.回归主题：  
> 创建全局global.css文件，并将其配置（引入）到项目入口文件main.js中。  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 1]  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 2]

## 场景二：动态切换:src和:class ##

> \*   **:src=" require路径 "**  
> ![在这里插入图片描述][20210708175458228.png]  
> ![在这里插入图片描述][20210708175548184.png]  
> \*    **:class="\[status===‘true’?class\_A:class\_B\]"**![在这里插入图片描述][2021070817574654.png]

## 场景三：路由跳转 ##

> this.$router.push(\{path: ‘/salary-sheet’\});

## 场景四：路由守卫（官网称：“导航守卫”） ##

> \* 概念（个人理解）：  路由跳转前（后），需要的操作，可以通过路由守卫中的方法，来实现具体操作效果。

> \* 必须知道的字段含义 :  
> to:Route：//将要访问的路径（页面path）；  
> from:Route: //从哪个页面跳转过来的；  
> next：Function  
> next(); //放行 继续跳转；  
> next(false) ; //中断当前导航；  
> next(’/set-password’); 或  
> next(\{path:’/set-password’\})  
> //无论如何，必须保证最后，有放行操作；next( );

> \* 实例1：  
> 在路由文件进行判断~判断路由跳转之前，是否符合某些条件，若成立则放行（保持原有的访问路径），若不成立，则进行手动干扰，改变其原有的跳转路径，设置新的跳转路径。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 3]  
> \* 实例2：  
> 针对首次使用初始密码进行登录的用户，登录成功后进行修改密码的界面，这里当时我的设计，就是登录成功后，进入某个页面之前，进行判断上一个路由，是否是xxxxx，若满足则进行弹框提示，是否立即进入修改密码界面，取消则关闭弹框。  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 4]  
> 注意点：next（）里面不单单其路由放行，或阻断设置新的路由路径，它同时可以放函数，实现具体的功能代码，而使用箭头函数在里面，若需要获取当前vue的实例，不能直接使用this.，必须使用人家的vm，将这个参数传递进去，vm能拿到当前页面的vue实例中的一些属性和方法。  
> ![在这里插入图片描述][20210708185941679.png]

> 补充：一个框架拥有路由的好处，就我而言只接触过两个前端框架，分别是Angular.x和Vue2.x，两个都拥有路由的概念。为什么需要路由？
> 
>  *  从用户的角度，切换页面速度快，类似有点局部刷新的效果，用户体验感好。
>  *  从开发的角度，拥有路由能更清楚分明的将各个页面进行区分开来，便于管理，代码同时很直观。

## 场景五：路由嵌套（官网称：“嵌套路由”） ##

>  *  概念（个人理解）：在一个组件路由下，配置了很多子组件路由。
>  *  场景：后台管理系统，左侧的菜单栏，就是一个父组件路由下，配置了很多子组件路由，从而实现菜单栏点击切换的界面效果。
> 
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 5]  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 6]

[2021070816471011.png]: /images/20221005/96fb8ae417b540979bfcc74ee6e35406.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70]: /images/20221005/f63722bf8083414388a840f075506d8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 1]: /images/20221005/cf5474d2862442ff8f68a94f42d04fbe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 2]: /images/20221005/18fb4b875de642c985e923b21566c3e8.png
[20210708175458228.png]: /images/20221005/bc5e299c08994a8eab694d579038326f.png
[20210708175548184.png]: /images/20221005/c3e1dda7b86544b294cd2b2713d182c9.png
[2021070817574654.png]: /images/20221005/54f91530bde34d3d9e417f85ec4ad0ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 3]: /images/20221005/e953578ad2624afc99a1d7e1e5795ec0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 4]: /images/20221005/effb00cbbe2a4748b9e4cb7720c7adc6.png
[20210708185941679.png]: /images/20221005/299e59d971154b6f906b22d9cc7dd398.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 5]: /images/20221005/27fd64d13d944cd5ad898c3840a50f56.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 6]: /images/20221005/18151c4a0f3347008ab5eac565aaa714.png