day4

5. SPA单页应用

5.1 锚点及常规url的区别

普通的URL地址：会刷新整个页面；会追加浏览历史记录；
锚链接：不会触发页面的整体刷新；会追加浏览历史记录；（锚链接是页面内的跳转）

5.2 什么是SPA,为什么有SPA

概念定义：SPA英文全称是Single Page Application, 中文翻译是 “单页面应用程序”；
通俗的理解是：一个网站的所有功能都在一个页面上进行切换，网页不会整体刷新；所有数据通过Ajax异步请求并渲染到页面上；
特点：
- 只有一个页面
- 页面不会刷新
- 数据都是用Ajax请求回来的
- 页面的切换，都是通过 Hash 来实现的
好处：
- 整个网站的主要资源，在页面打开的一瞬间，都加载完毕了；今后页面的切换，不会再请求新的页面资源了，只是再请求页面对应的 Ajax 数据；
- 由于项目中所有的数据，都是通过Ajax获取回来的，所以，减轻了服务器端渲染的压力；
- 能够提升前端人员的技术

5.3 原生实现SPA

使用 component 标签的:is属性来切换组件

6. vue-router 路由

6.1 什么是路由

什么是路由：路由就是对应关系；

后端路由的定义：URL地址到后端处理函数之间的关系；
前端路由的定义：hash 到组件之间的对应关系；
- hash特点: http请求中不会包含 hash相关内容,
前端路由的目的：为了实现单页面应用程序的开发；

安装方式

通过js引入

 <script src='vue.js'>/<script>
 <script src='vue-router.js'>/<script>

通过npm下载后注册路由模块

 import Vue from 'vue'
 import VueRouter from 'vue-router'
 
 Vue.use(VueRouter)

6.2 在 vue 中使用 vue-router【重点】

创建路由连接

 <!-- router-link 就是 第一步，创建 路由的 hash 链接的 -->
 <!-- to 属性，表示 点击此链接，要跳转到哪个 hash 地址， 注意：to 属性中，大家不需要以 # 开头 -->
 <router-link to="/home">首页</router-link>
 <router-link to="/movie">电影</router-link>
 // tag属性改变默认标签(a)为span
 <router-link to="/about" tag='span'>关于</router-link>

创建路由的组件

 // 创建 首页组件 的配置对象
 const home = {
  template: '<h3>首页组件</h3>'
 }
 
 const movie = {
  template: '<h3>电影组件</h3>'
 }
 
 const about = {
  template: '<h3>关于组件</h3>'
 }

创建路由规则

 // 创建路由规则（对应关系）
 const router = new VueRouter({ // 配置对象中，要提供 hash 地址 到 组件之间的 对应关系
  routes: [ // 这个 routes 就是 路由 规则 的数组，里面要放很多的对应关系
    // { path: 'hash地址', component: 配置对象 }
    { path: '/home', component: home },
    { path: '/movie', component: movie },
    { path: '/about', component: about }
  ]
 })
 
 // 创建的 router 对象，千万要记得，挂载到 vm 实例上
 var vm = new Vue({
  el: '#app',
  data: {},
  methods: {},
  // router: router
  router // 把 创建的路由对象，一定要挂载到 VM 实例上，否则路由不会生效
 });

在页面上放路由容器

 <!-- 这是路由的容器，将来，通过路由规则，匹配到的组件，都会被展示到这个 容器中 -->
 <router-view></router-view>

6.3 路由规则的匹配过程

用户点击页面的路由链接router-link，点击的一瞬间，就会修改浏览器地址栏中的 Hash 地址；
当 hash 地址被修改以后，会立即被 vue-router 监听到，然后进行路由规则的匹配；最终，找到要显示的组件；
当路由规则匹配成功以后，就找到了要显示的组件，然后把这个组件，替换到页面指定的路由容器router-view中

路由 redirect 重定向的使用

这里的redirect 和 node中 redirect 完全是两码事

node中的重定向属于服务端技术 302 重定向
路由重定向是属于客户端手动修改 hash值
```
  {path: '/', redirect: '/home}
```

6.4 设置路由高亮的两种方式

通过路由默认提供的router-link-active, 为这个类添加自己的高亮样式即可；
通过路由构造函数，在传递路由配置对象的时候，提供 linkActiveClass:'myactive' 属性，来覆盖默认的高亮类样式；
```
 .router-link-active {
   color: red;
   font-weight: bold;
 }
```

6.5 嵌套路由

使用children 属性, 实现子路由, 同时, 子路由的path 前面, 不要带 / , 否则永远以跟路径开始请求, 这样不方便用户去理解URL地址

{ path: '/home', component: home, children: [
    
    { path: 'first', component: first }
    
] }

6.6 路由传参

路由传参，首先，要把路由规则中，对应的参数位置，通过 : 来定义为一个参数；
可以在组件中，直接使用this.$route.params 或this.$route.query来获取参数；【太麻烦，不推荐】
也可以开启 props ，来接收路由中的参数；【推荐】
1. 在需要传参的路由规则中，添加 props: true

        { path: '/movie/:type/:id', component: movie, props: true }

在对应的组件中，定义 props 并接收路由参数

  const movie = {
      template: '<h3>电影组件 --- {{type}} --- {{id}}</h3>', // 使用参数
      props: ['type', 'id'] // 接收参数
    }

6.7 命名路由

什么是命名路由：就是为路由规则，添加了一个 name ;

什么是命名路由
router-link中通过路由名称实现跳转

命名路由使用 params属性传参

<router-link :to="{ name: 'moviePage', params: {type: 'top250', id: 9} }" tag="li">

6.8 编程式（JS）导航

之前所学的router-link是标签跳转；
除了使用router-link是标签跳转之外，还可以使用Javascript来实现路由的跳转；

什么是编程式导航
- 使用vue-router提供的JS API实现路由跳转的方式，叫做编程式导航；
编程式导航的用法

this.$router.push('路径的地址')
this.$router.go(n)
this.$router.forward()
this.$router.back()

今天，学了好多 router 之类的东西，其中

this.$route 是路由参数对象

this.$router 是路由导航对象

vm 实例上的 router 属性，是来挂载路由对象的

在 new VueRouter({ /* 配置对象 */ }) 的时候，配置对象中，有一个 routes 属性，是来创建路由规则的

6.9 路由导航守卫

案例需求：只允许登录的情况下访问 后台首页 和 后台电影页面，如果不登录，默认跳转回登录页面；

API语法：

  // 参数1：是要去的那个页面路由相关的参数
  // 参数2：从哪个页面即将离开
  // 参数3：next 是一个函数，就相当于 Node 里面 express 中的 next 函数
  // 注意： 这里的 router 就是 new VueRouter 得到的 路由对象
  router.beforeEach((to, from .next) => { /* 导航守卫 处理逻辑 */ })

nrm的使用

作用: 提供了一些最常用的npm包镜像地址,能够让我们快速切换安装包时候的服务器地址;

什么是镜像: 原来包一开始只存在国外的npm服务器,但由于网络的原因,经常访问不到,这时候,我们可以在国内,创建一个和官网完全一样的npm服务器,只不过,数据都是从人家那里拿过来的,除此之外使用的方式完全一样;

运行npm i nrm -g全局安装
使用nrm ls查看可用镜像源地址和当前所使用的镜像源地址
使用nrm use taobao或者nrm use cnpm切换不同的镜像源地址

注意: nrm只是单纯的提供了几个常用的下载包url地址,但是每次安装包的时候,使用的都是npm

Vue - day4