[JavaScript知识库] 33.Vue(回顾)

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 33.Vue(回顾) -> 正文阅读

[JavaScript知识库]33.Vue(回顾)

打卡33

2021.6月回顾篇三之脚手架和路由：

脚手架

Vue CLI(Command-Line Interface) 命令行界面，作用：快速搭建Vue开发环境以及对应的webpack配置
1. 使用前提：
  1. 安装Node.js
  2. Webpack (npm install webpack -g)
2. 使用：
  1. 安装Vue脚手架3（npm install -g @vue/cli）
  2. 以上方式安装的是Vue CLI3的版本，如果按照Vue CLI2的方式初始化项目时是不可以的。在脚手架3的基础上使用脚手架2，需要通过命令（npm install @vue/cli-init -g）再拉取一个模板，这样就能既可以使用脚手架2也能使用脚手架3了
  3. Vue CLI2初始化项目（npm init webpack my-project）生成webpack相关配置 npm run dev (在webpack.base.conf.js)
    
    Vue CLI3初始化项目（npm create my-project） npm run serve
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bQrGlN7w-1625324623583)(C:\Users\王小只\AppData\Roaming\Typora\typora-user-images\image-20210703164806498.png)]$
3. runtime-only 和runtime-compiler的区别
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hGU9SGOM-1625324623584)(C:\Users\王小只\AppData\Roaming\Typora\typora-user-images\image-20210703164616761.png)]$
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0yxToAts-1625324623585)(C:\Users\王小只\AppData\Roaming\Typora\typora-user-images\image-20210703164441548.png)]$
Vue-router路由插件：

路由是就是通过互联网的网络把信息从原地址传输到目的地址的活动，路由插件就是基于URL和组件之间的映射关系的，有了映射关系后，当改变地址栏，就会自动去加载对应的组件去渲染到网页上面。
1. 认识路由:单页面富应用阶段：SPA在前后端分离的基础上加了一层前端路由，核心：改变URL,但是页面不进行整体的刷新。
  
  如何实现?
  1. URL的hash
  2. HTML5的history
2. Vue-router基本使用（安，一导二用三创建实例）
  1. 安装 Vue-router (npm install vue-router --save)
  2. 在模块化工程中使用它（插件，通过Vue.use()来安装）
    1. 第一步: 导入路由对象，并且调用Vue.use(VueRouter)
    2. 第二步: 创建路由实例，并且传入路由映射配置
    3. 第三步：在Vue实例中挂载创建的路由实例
  3. 配置路由的映射关系具体步骤
    
    使用vue-router的步骤：
    1. 第一步：创建路由组件(components),需导入。（一个路径对应一个组件）
    2. 第二步：配置路由映射，组件和路径映射关系:
      
      {
      
      path:’ ',
      
      component:
      
      }
    3. 第三步：使用路由： + to | 标签 + 代码跳转
      
      1. 最终会渲染为标签，通过to 属性，用于指定跳转的路径，找到对应的组件，把对应的组件渲染到对应的位置
```
<router-link to="映射关系中的path">首页</router-link>
 <router-link to="/about">关于</router-link>
```
      2.默认路径:redirect 重定向
```
{
      path: '/',
      // component: Home 不使用这个方法，使用重定向
      redirect: '/home' // redirect 重定向
    }
```
      3.修改模式 :HTML5的history
```
export default new Router({
	routes,
	mode: 'history'
```
      4.通过跳转，的属性
```
<router-link> 最终会渲染为<a>标签，通过to 属性，用于指定跳转的路径，找到对应的组件，把对应的组件渲染到对应的位置(router-view)
其他属性: 
tag : 可以指定<router-link>之后渲染成什么组件（button li等）
replace：默认返回按钮是能够点击的 增加这个属性返回按钮就没有效果了点击也不能返回到上一个页面中
active-class：当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class
	使用场景:进行高亮显示的导航菜单或底部tabbar时，会使用到该类。
       -->
```
      5.通过代码跳转路由：this. $r o u t e r . p u s h ∣ r e p l a c e (^{'} p a t h^{'}) ($ router是new 出来的router 对象)
```
<button @click = "btnClick">首页</button>
methods:{
	btnClick(){
		this.$router.push('/home')|//点击发生跳转 而不是通过<router-link>的to属性进行跳转
		this.$router.replace('/about')
	}
}
```
      6.动态路由的使用（场景）this. $r o u t e . p a r a m s . i d （$ route拿到当前出于活跃状态的路由）
```
//1.在index.js配置路由映射关系
{
  // 配置动态路由
  path:'/user/:userid',
  meta: {
     title: '用户'
   },
  component: User
}
//2.APP.vue
 
 //vue模板
 <router-link :to="'/user/'+ userId">用户</router-link>
 //vue实例
  data(){
    return{
      userId: 'lisi'
    }
  }
  //3.想将App.vue里面定义的id获取到
  //模板
     <h2>{{$route.params.userId}}</h2>//计算属性
  //实例
  computed: {
    userId(){
      return this.$route.params.userid//出于活跃的动态路由的userid(path)
    }
  }
```
      6. $r o u t e r 和$ route区别：
      
      ? $r o u t e r ：为 R o u t e r 实例，想要导航到不同的 U R L, 则使用$ router.push方法
      
      ? $route：为当前route跳转对象里面可以获取name,path,query,params等
  4. 懒加载:用到时，再加载；
    1. 现象：当我们一次性从服务器请求下来这个页面，可能需要花费一定的时间，甚至用户的电脑上还出现了短暂空白、
      
      解决：使用路由懒加载就是将路由对应的组件打包成一个个的js代码块只有这个路由被访问的时候，才加载对应的组件
    2. 方式：
      $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5nO1AaB4-1625324623588)(C:\Users\王小只\AppData\Roaming\Typora\typora-user-images\image-20210703220856166.png)]$
3. Vue-router嵌套路由
  
  在Home页面，希望通过/home/news和/home/message访问一些内容
  一个路径映射一个组件，访问这两个路径也会分别渲染两个组件
  步骤：1.创建对应的子组件，并且在路由映射中配置对应的子路由
  2.在组件内部使用标签
```
router/index.js
//1.
{
     path: '/home',//当路径出现了/home就显示下面这个组件
     component: Home,//先导入再使用
     meta: {
      title: '首页'
     },
     children:[
       {
        path: '',
        redirect: 'news'
       },
       {
         path: 'news',//子组件不用加/
         component: HomeNews
       },
       {
         path: 'message',
         component: HomeMessage
       }
     ]
    }
//2.Home.vue模板
  <template>
  <div>
    <h2>我是首页</h2>
    <p>我是页面内容，哈哈哈</p>
    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/message">消息</router-link>
    <router-view></router-view>
    <h2>{{message}}</h2>
  </div>
</template>
```
4. Vue-router参数传递
```

<router-link :to="{path:'/profile', query: {name: 'wang',age: 20,height: 1.6}}">档案</router-link>
```
5. Vue-router导航守卫（监听跳转过程）
```

```
```
//1.
{
     path: '/home',//当路径出现了/home就显示下面这个组件
     component: Home,//先导入再使用
     meta: {
      title: '首页'
     },
     children:[
       {
        path: '',
        redirect: 'news'
       },
       {
         path: 'news',//子组件不用加/
         component: HomeNews
       },
       {
         path: 'message',
         component: HomeMessage
       }
     ]
    }
//2.
router.beforeEach((to,from,next) => {
  // 从from跳转到to
  document.title = to.matched[0].meta.title
  next()
})
```
6. keep-alive（组件不会被频繁的创建及销毁）
```
keep-alive 是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染（当我们离开组件时，不要让组件被频繁的销毁，一进来，频繁的被创建）
 router-view 也是一个组件，如果直接被包在keep-alive里面，所有路径匹配到的视图组件都会被缓存
 需求: 要求某一个组件需要频繁的被创建及销毁
        重要属性:
        include 字符串或正则表达式 只有匹配的组件会被缓存
        exclude 字符串或正则表达式 任何匹配的组件都不会被缓存
        
 div><keep-alive exclude="Profile,User"><router-view></router-view></keep-alive></div>
```