Vue - day4

  1. 云栖社区>
  2. 博客>
  3. 正文

Vue - day4

rlq_浅 2018-08-16 20:41:00 浏览640
展开阅读全文

day4

5. SPA单页应用

5.1 锚点及常规url的区别

  1. 普通的URL地址:会刷新整个页面;会追加浏览历史记录;
  2. 锚链接:不会触发页面的整体刷新;会追加浏览历史记录;(锚链接是页面内的跳转)

5.2 什么是SPA,为什么有SPA

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

5.3 原生实现SPA

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

6. vue-router 路由

6.1 什么是路由

什么是路由:路由 就是 对应关系;

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

安装方式

  1. 通过js引入

  2.  <script src='vue.js'>/<script>
     <script src='vue-router.js'>/<script>
    
  3. 通过npm下载后 注册路由模块

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

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

  1. 创建路由连接

     <!-- 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>
    
  2. 创建路由的组件

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

     // 创建路由规则(对应关系)
     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 实例上,否则路由不会生效
     });
    
  4. 在页面上放路由容器

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

6.3 路由规则的匹配过程

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

路由 redirect 重定向的使用

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

  • node中的重定向 属于 服务端技术 302 重定向

  • 路由 重定向 是属于 客户端 手动修改 hash值

      {path: '/', redirect: '/home}
    

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

  1. 通过路由默认提供的router-link-active, 为这个类添加自己的高亮样式即可;

  2. 通过路由构造函数,在传递路由配置对象的时候,提供 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 路由传参

  1. 路由传参,首先,要把路由规则中,对应的参数位置,通过 : 来定义为一个参数;

  2. 可以在组件中,直接使用this.$route.paramsthis.$route.query来获取参数;【太麻烦,不推荐】

  3. 也可以开启 props ,来接收路由中的参数;【推荐】

    1. 在需要传参的路由规则中,添加 props: true
        { path: '/movie/:type/:id', component: movie, props: true }
  1. 在 对应的组件中,定义 props 并接收路由参数

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

6.7 命名路由

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

  1. 什么是命名路由

  2. router-link中通过路由名称实现跳转

  3. 命名路由使用 params属性传参

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

6.8 编程式(JS)导航

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

  1. 什么是编程式导航
    • 使用vue-router提供的JS API实现路由跳转的方式,叫做编程式导航;
  2. 编程式导航的用法
  • 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服务器,只不过,数据都是从人家那里拿过来的,除此之外使用的方式完全一样;

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

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

网友评论

登录后评论
0/500
评论
rlq_浅
+ 关注