技术分享
首页
  • JavaScript

    • 构造函数和原型
    • Cookie和Session
    • Object.create(null)和{}
    • TypeScript配置
    • typescript入门到进阶
  • 框架

    • Vue-Router
    • React基础入门
  • 其它

    • Http协议
    • 跨域问题总结
  • 分析Promise实现
  • Axios源码分析
  • Webpack原理
  • vueRouter源码分析
  • Vue

    • Vite快速搭建Vue3+TypeScript项目
    • Cordova打包Vue项目的问题
    • Vue将汉字转为拼音,取出首字母
    • h5项目问题总结
  • JavaScript

    • new Function
  • 后端

    • Node.js中使用Crypto生成Token
    • Body-Parser处理多层对象的问题
  • 其它

    • 项目Demo汇总
    • Vuepress+Vercel搭建个人站点
    • 项目中能用到的
    • husky规范代码提交
  • Mongoose基础
  • Multer文件上传中间件的使用
  • JavaScript

    • 浅谈两数全等
    • JavaScript进制转换
    • 手写bind,apply,call和new
  • 算法

    • 数组去重和排序
    • 数组扁平化
    • 斐波那契数列
  • JavaScript 数据结构
  • 其它

    • webpack面试题
    • vite面试题
    • svg和canvas的优缺点
    • TypeScript面试题
    • Vue常见面试题
  • 计算机网络

    • 数据链路层
    • 网络层
  • Git的使用
  • Nginx的使用
  • CentOS7安装Nginx
  • 正则表达式
  • SEO搜索引擎优化
  • Serverless介绍
友链
GitHub (opens new window)

刘誉

总有人要赢,为什么不能是我
首页
  • JavaScript

    • 构造函数和原型
    • Cookie和Session
    • Object.create(null)和{}
    • TypeScript配置
    • typescript入门到进阶
  • 框架

    • Vue-Router
    • React基础入门
  • 其它

    • Http协议
    • 跨域问题总结
  • 分析Promise实现
  • Axios源码分析
  • Webpack原理
  • vueRouter源码分析
  • Vue

    • Vite快速搭建Vue3+TypeScript项目
    • Cordova打包Vue项目的问题
    • Vue将汉字转为拼音,取出首字母
    • h5项目问题总结
  • JavaScript

    • new Function
  • 后端

    • Node.js中使用Crypto生成Token
    • Body-Parser处理多层对象的问题
  • 其它

    • 项目Demo汇总
    • Vuepress+Vercel搭建个人站点
    • 项目中能用到的
    • husky规范代码提交
  • Mongoose基础
  • Multer文件上传中间件的使用
  • JavaScript

    • 浅谈两数全等
    • JavaScript进制转换
    • 手写bind,apply,call和new
  • 算法

    • 数组去重和排序
    • 数组扁平化
    • 斐波那契数列
  • JavaScript 数据结构
  • 其它

    • webpack面试题
    • vite面试题
    • svg和canvas的优缺点
    • TypeScript面试题
    • Vue常见面试题
  • 计算机网络

    • 数据链路层
    • 网络层
  • Git的使用
  • Nginx的使用
  • CentOS7安装Nginx
  • 正则表达式
  • SEO搜索引擎优化
  • Serverless介绍
友链
GitHub (opens new window)
  • js基础
  • vue入门
  • react基础入门
  • http协议
  • cookie和session
  • 跨域问题总结
  • 构造函数和原型
  • Object.create(null)和{}
  • TypeScript配置
  • Vue-Router
    • 前端路由阶段
      • 前后端分离阶段
      • 单页面应用阶段
      • 前端路由的核心是什么?
    • 前端路由实现
      • URL的hash
      • HTML5的history模式
    • vue-router
      • vue-router 是基于路由和组件的
      • 在模块化工程中使用它(因为是一个插件,所以可以通过Vue.use()来安装路由功能)
      • 使用vue-router的步骤
      • 路由的懒加载
      • 传递参数
      • keep-alive
  • typescript入门到进阶
  • 前端
coderly
2020-06-30

Vue-Router

# Vue-Router

# 前端路由阶段

# 前后端分离阶段

  1. 随着Ajax的出现,有了前后端分离的开发模式。
  2. 后端只提供API来返回数据,前端通过 Ajax 获取数据,并且可以通过JavaScript将数据渲染到页面中。
  3. 这样做最大的优点就是前后端责任的清晰,后端专注于数据上,前端专注于交互和可视化上。
  4. 并且当移动端(IOS/Android)出现后,后端不需要进行任何处理,依然使用之前的一套 API 即可。

# 单页面应用阶段

  1. 其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由。
  2. 也就是前端来维护一套路由规则。

# 前端路由的核心是什么?

  1. 改变URL,但是页面不进行整体的刷新。

# 前端路由实现

# URL的hash

  1. URL的hash也就是锚点(#),本质上是改变window.location的href属性。
  2. 我们可以通过直接赋值location.hash来改变href,但是页面不发生刷新。

# HTML5的history模式

# pushState

  1. history接口是HTML5新增的,它有五种模式改变URL而不刷新页面。
  2. history.pushState()

# replaceState

  1. history.replaceState()

# go

  1. history.go()
  2. history.go(-1)等价于history.back()
  3. history.go(1)等价于history.forward()
  4. 这三个接口等同于浏览器界面的前进后退。

# vue-router

# vue-router 是基于路由和组件的

  1. 路由用于设定访问路径,将路径和组件映射起来。
  2. 在vue-router的单页面应用中,页面的路径的改变就是组件的切换。

# 在模块化工程中使用它(因为是一个插件,所以可以通过Vue.use()来安装路由功能)

  1. 第一步:导入路由对象,并且调用 Vue.use(VueRouter)
  2. 第二步:创建路由实例,并且传入路由映射配置
  3. 第三步:在 Vue 实例中挂载创建的路由实例

# 使用vue-router的步骤

  1. 第一步:创建路由组件
  2. 第二步: 配置路由映射:组件和路径映射关系
  3. 第三步:使用路由:通过router-link和router-view

# 介绍

  1. <router-link>:该标签是一个 vue-router 已经内置的组件,它会被渲染成一个标签
  2. <router-view>:该标签会根据当前的路径,动态渲染出不同的组件
  3. 网页的其它内容,比如顶部的标题/导航,或者底部的一些版权信息等会和<router-view>处于同一个等级
  4. 在路由切换时,切换的是<router-view>挂载的组件,其它内容不会发生改变

# router-link

  1. to:用于指定跳转的路径
  2. tag:tag 可以指定<router-link>之后渲染成什么组件,比如下面的会被喧嚷称为<li>标签,而不是<a>
<router-link to="/home" tag="li"></router-link>
1
  1. replace:路由跳转默认是可以返回的,也就是 push 进路由栈中,而加了 replace 属性后,不会出现返回和前进,因为该跳转使用 replaceState()
  2. active-class:当<router-link>对应的路由匹配成功时,会自动给当前元素设置一个 router-link-active 的 class,设置 active-class 可以修改默认的名称。
    • 在进行高亮显示的导航菜单或者底部 tabbar 时,会使用到该类。
    • 通常不会修改类的属性,会直接使用默认的 router-link-active 即可。

# this.$router和this.$route

  1. this.$router 获取的是 router 路由表数组。
  2. this.$route 获取的是当前活跃状态的那一个路由对象

# 路由的懒加载

# 官方解释

  1. 当打包构建应用时,Javascript 包会变得非常大,影响页面加载。
  2. 如果我们能把不同路由对应的组件风割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更高效了

# 对官方解释解读

  1. 首先,我们知道路由中通常会定义很多不同的页面。
  2. 这个页面最后被打包在哪里呢?一般情况下,是放在一个 js 文件中。
  3. 但是,页面这么多放在一个 js 文件中,必然会造成这个页面非常的大。
  4. 如果我们一次性从服务器请求下来这个页面,可能需要花费一定的时间,甚至用户的电脑上还出现了短暂空白的情况。
  5. 使用路由懒加载就能解决。

# 路由懒加载做的事情

  1. 路由懒加载的主要作用就是将路由对应的组件打包成一个个的 js 代码块。
  2. 只有在这个路由被访问到的时候,才加载对应的组件

# 懒加载的方式

  1. 结合 Vue 的异步组件和 Webpack 的代码分析
const Home = resolve => { require.ensure(['../components/Home.vue'], () =>{ resolve(require('../components/Home.vue'))
})
1
2
  1. AMD 写法
const About = (resolve = require(['../components/About.vue'], resolve))
1
  1. 在 es6 中,我们可以有更加简单的写法来组织 Vue 异步组件和 Webpack 的代码分割
const Home = () => import('../components/Home.vue')
1

# 传递参数

传递参数主要有两种类型:params和query

# params

  1. 配置路由格式:/router/:id
  2. 传递的方式:在path后面跟上对应的值
  3. 传递后形成的路径:/router/123

# query

  1. 配置路由格式:/router,也就是普通配置
  2. 传递的方式:对象中使用 query 的 key 作为传递方式
  3. 传递后形成的路径:/router?id=123
<router-link
  :to="{ path: '/home',query:{  name: 'coderly', sex: '男'} }"
></router-link>
1
2
3
// 获取传过来的值
this.$route.query
// 跳转传递的另一个方式
this.$router.push({
    path: '/home',
    query:{
        name: 'coderly',
        sex: '男’
    }
})
1
2
3
4
5
6
7
8
9
10

# keep-alive

# keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。

它有两个非常重要的属性:

  1. include - 字符串或正则表达,只有匹配的组件会被缓存。
  2. 字符串或正则表达式,任何匹配的组件都不会被缓存
// exclude="home"的home是Home组件的name值,不是路径里的name
<keep-alive exclude="home,about">
  <router-view />
</keep-alive>
1
2
3
4
#Vue
上次更新: 2021/03/25, 12:42:28
TypeScript配置
typescript入门到进阶

← TypeScript配置 typescript入门到进阶→

最近更新
01
代码片段
04-22
02
koa全家桶
03-29
03
mocks项目复盘
03-29
更多文章>
Theme by Vdoing | Copyright © 2021-2022 coderly | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式