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 ，来接收路由中的参数；【推荐】
- 在需要传参的路由规则中，添加
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
