vue-router
关注
分享
扫一扫
爱发呆的程序员
这个作者很懒，什么都没留下…
展开
-
vue-router：VueRouter模拟实现与源码解读
vue-router：VueRouter模拟实现与源码解读1、Vue.use( )源码源码位置：vue/src/core/global-api/use.jsexport function initUse (Vue: GlobalAPI) { //use方法的参数接收的是一个插件，该插件的类型可以是一个函数，也可以是一个对象 Vue.use = function (plugin: Function | Object) { //_installedPlugins数组中存放已经安装的原创 2021-03-10 10:17:27 · 290 阅读 · 0 评论 -
Vue-router原理:8、initEvent方法实现
Vue-router原理:8、initEvent方法实现现在有一个问题就是，当点击浏览器中的后退与前进按钮的时候，地址栏中的地址发生了变化，但是对应的组件没有发生变化。这时候要解决这个问题， 就需要用到popstate事件popstate事件，可以发现浏览器历史操作的变化，记录改变后的地址，单击前进或者是后退按钮的时候触发该事件initEvent() { window.addEventListener("popstate", () => { this.data.cu原创 2021-03-06 11:51:44 · 323 阅读 · 0 评论 -
Vue-router原理:7、创建router-view组件
Vue-router原理:7、创建router-view组件router-view组件就是一个占位符。当根据路由规则找到组件后，会渲染到router-view的位置。在initComponents方法中创建router-view组件 //该方法需要一个参数为Vue的构造函数。 //当然也可以使用全局的_Vue. initComponents(Vue) { Vue.component("router-link", { props: { to: String,原创 2021-03-06 11:50:46 · 904 阅读 · 0 评论 -
Vue-router原理:6、render函数
Vue-router原理:6、render函数虽然使用完整版Vue可以解决上面的问题，但是由于带有编译器，体积比运行时版本大10k左右，所以性能比运行时版要低。那么这一小节我们使用运行时版本来解决这个问题。我们知道，完整版中的编译器的作用就是将template模板转成render函数，所以在运行时版本中我们可以自己编写render函数。但是在这你肯定也有一个问题，就是在单文件组件中，我们一直都是在写<template></template>,并且没有写render函数，但是原创 2021-03-06 11:48:59 · 1203 阅读 · 0 评论 -
Vue-router原理:5、initComponents方法实现
Vue-router原理:5、initComponents方法实现initComponents方法，主要作用是用来创建router-link和router-view这两个组件的。下面先在这个方法中创建router-link这个组件。先来看一下router-link这个组件的基本使用<router-link to="/users"> 用户管理</router-link>我们知道，router-link这个组件最终会被渲染成a标签，同时to作为一个属性，其值会作为a标签中的h原创 2021-03-06 11:47:11 · 585 阅读 · 0 评论 -
Vue-router原理:4、createRouteMap方法实现
Vue-router原理:4、createRouteMap方法实现createRouteMap方法，该方法会把构造函数中传入进来的options参数中的路由规则，转换成键值对的形式存储到routeMap中。 键就是路由的地址，值就是对应的组件 createRouteMap() { this.options.routes.forEach((route) => { this.routeMap[route.path] = route.component; });原创 2021-03-06 11:42:50 · 3236 阅读 · 0 评论 -
Vue-router原理:3、实现构造函数
Vue-router原理:3、实现构造函数在介绍VueRouter的类图时，我们说过Constructor是一个构造方法，该该构造方法中会初始化options ,data,routeMap这几个属性。 constructor(options) { this.options = options; this.routeMap = {}; this.data = _Vue.observable({ current: "/", }); }原创 2021-03-06 11:41:55 · 637 阅读 · 0 评论 -
Vue-router原理:2、install方法实现
Vue-router原理:2、install方法实现在vue_router_app项目的src目录下面创建一个vuerouter目录，同时创建一个index.js文件，在该文件中创建如下的代码。install方法需要的参数是Vue的构造方法。let _Vue = null;export default class VueRouter { //调用install方法的时候，会传递Vue的构造函数 static install(Vue) { //首先判断插件是否已经被安装，如果已经被安装原创 2021-03-06 11:41:07 · 579 阅读 · 0 评论 -
Vue-router：13、Hash模式与History模式
Vue-router：13、Hash模式与History模式13.1 Hash模式与History模式区别前端路由中，不管是什么实现模式，都是客户端的一种实现方式，也就是当路径发生变化的时候，是不会向服务器发送请求的。如果需要向服务器发送请求，需要用到ajax方式。两种模式的区别首先是表现形式的区别Hash模式https://www.baidu.com/#/showlist?id=22256hash模式中路径带有#, #后面的内容作为路由地址。可以通过问号携带参数。当然这种模式相对来说原创 2021-03-04 11:16:32 · 3066 阅读 · 3 评论 -
Vue-router:12、路由组件缓存
Vue-router:12、路由组件缓存利用keepalive做组件缓存，保留组件状态，提高执行效率。<keep-alive include="home"> <router-view></router-view></keep-alive>使用include或者exclude时要给组件设置name（这个是组件的名称，组件的名称通过给组件添加name属性来进行设置）当我们进行路由切换的时候，对应的组件会被重新创建，同时数据也会不断的重新加载。原创 2021-03-04 10:38:32 · 709 阅读 · 1 评论 -
Vue-router:11、addRoutes动态路由添加
Vue-router:11、addRoutes动态路由添加在前面的案例中，我们都是将路由定义好，然后通过路由守卫来判断，某个用户是否登录，从而决定能否访问某个路由规则对应的组件内容。但是，如果某些路由规则只能用户登录以后才能够访问，那么我们也可以不用提前定义好，而是在登录后，通过addRoutes方法为其动态的添加。首先这里需要，还需要全局的路由守卫来进行校验判断，只不过这里全局路由守卫的逻辑发生了变化。router.beforeEach((to, from, next) => {原创 2021-03-04 10:34:27 · 1023 阅读 · 1 评论 -
Vue-router:10、路由守卫
Vue-router:10、路由守卫Vue-router中的路由守卫，主要是对其内容进行保护，如果没有对应的权限，则不允许访问。我们首先来看一下全局守卫，也就是所有的路由都会经过全局守卫来进行检测。 //实现全局守卫 router.beforeEach((to, from, next) => { //to:去哪个页面，from来自哪个页面，next继续执行. //判断哪个路由需要进行守卫，这里可以通过元数据方式 if (to.meta原创 2021-03-03 17:32:24 · 222 阅读 · 1 评论 -
Vue-router:9、路由案例
Vue-router:9、路由案例9.1 抽离并且渲染App根组件。将素材中的代码修改成如下的形式：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>基于vue-router的案例</title> <script src="./lib/vue.js"></script> <原创 2021-03-03 17:10:09 · 293 阅读 · 1 评论 -
Vue-router:8、编程式导航
Vue-router:8、编程式导航页面导航的两种方式声明式导航：通过点击链接实现导航的方式，叫做声明式导航例如：普通网页中的 <a></a> 链接 或 vue 中的 <router-link></router-link>编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航例如：普通网页中的 location.href编程式导航基本用法常用的编程式导航 API 如下：this.$router.push(‘hash地原创 2021-03-03 16:03:47 · 201 阅读 · 1 评论 -
Vue-router: 7、命名路由
Vue-router: 7、命名路由为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”。 const router = new VueRouter({ routes: [ { path: '/user/:id', name: 'user', component: User } ] })<!--单击链接，可以跳转到名称为`user`的这个路由规则，并且通过params原创 2021-03-03 14:45:03 · 263 阅读 · 1 评论 -
Vue-router:6、动态路由匹配
Vue-router:6、动态路由匹配6.1 动态匹配路由的基本用法思考：<!– 有如下 3 个路由链接 --> <router-link to="/user/1">User1</router-link> <router-link to="/user/2">User2</router-link> <router-link to="/user/3">User3</router-link> // 定义如下三个对原创 2021-03-03 14:15:16 · 281 阅读 · 0 评论 -
Vue-router5、嵌套路由
Vue-router5、嵌套路由嵌套路由功能分析点击父级路由链接显示模板内容模板内容中又有子级路由链接点击子级路由链接显示子级模板内容下面看一下实现的步骤父路由组件模板父级路由链接父组件路由填充位<p> <router-link to="/user">User</router-link> <router-link to="/register">Register</router-link> &l原创 2021-03-03 11:31:50 · 209 阅读 · 0 评论 -
Vue-router：4、路由重定向
Vue-router：4、路由重定向路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面；通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：var router = new VueRouter({ routes: [ // 其中，path 表示需要被重定向的原地址，redirect 表示将要被重定向到的新地址 //当用户在地址栏中输入`/`,会自动的跳转到`/user原创 2021-03-03 11:14:52 · 2450 阅读 · 0 评论 -
vue-router：3、vue-router的基本使用
vue-router：3、vue-router的基本使用Vue Router（官网：https://router.vuejs.org/zh/）是 Vue.js 官方的路由管理器。 它和Vue.js 的核心深度集成，可以非常方便的用于SPA应用程序的开发。基本使用的步骤：引入相关的库文件添加路由链接添加路由填充位定义路由组件配置路由规则并创建路由实例把路由挂载到Vue 根实例中下面看一下具体的实施过程引入相关的库文件<!-- 导入 vue 文件，为全局 window 对象挂原创 2021-03-03 11:12:15 · 316 阅读 · 0 评论 -
Vue-router：2、实现简易前端路由
Vue-router：2、实现简易前端路由基于URL中的hash实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换）案例代码实现如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /原创 2021-03-03 11:07:09 · 147 阅读 · 0 评论 -
Vue-router：1、路由简介
Vue-router：1、路由简介路由是一个比较广义和抽象的概念，路由的本质就是对应关系。在开发中，路由分为： 后端路由 前端路由后端路由概念：根据不同的用户 URL 请求，返回不同的内容本质：URL 请求地址与服务器资源之间的对应关系SPA（Single Page Application）Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作）SPA（Single Page Application）单页面应用程序：整个网站只有一个页原创 2021-03-03 11:04:56 · 244 阅读 · 0 评论 -
Vue-router原理:1、分析Vue Router
Vue-router原理现在我们已经掌握了Vue Router的基本使用，下面我们来模拟Vue Router的实现，通过模拟实现，来了解其内部的实现原理。我们这里模拟的是History模式。Hash模式基本实现上是一样的。这里先来复习一下Hash模式的工作原理。·URL中#后面的内容作为路径地址，当地址改变的时候不会向服务器发送请求，但是会触发hashchange事件。监听hashchange事件，在该事件中记录当前的路由地址，然后根据路由地址找到对应组件。根据当前路由地址找到对应组件重新渲染原创 2021-03-06 10:31:42 · 352 阅读 · 1 评论