vue-router | 易学教程

Vue学习笔记十三：路由的跳转

阅读更多关于 Vue学习笔记十三：路由的跳转

Vue学习笔记十三：路由的跳转 Vue版本：2.5.21 Vue-router版本：3.1.6 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>路由的跳转</title> </head> <body>  <div id="app"></div> <script src=

在Vue中实现随hash改变响应菜单高亮

阅读更多关于在Vue中实现随hash改变响应菜单高亮

情景 Vue+Element 实现管理页面菜单栏，点击菜单时 router 改变 hash 访问不同子组件。但是改变 hash 时菜单栏展开状态和 highlight 并不会同步，需要手动实现。 Try Try See 第一反应是通过 onhashchange 监听 hash 的变化，将 location.hash.slice(2) 推给 menu 的 default-active 即可。此时通过手动输入 url 或者前进后退时均可正常加载对应状态，但是通过组件中的 link 访问时，menu 的状态没有改变。加入 alert 验证发现没有触发 hashchange。 Why Seafault 的解释是 Vue-Router 底层调用的是 history.pushState 查阅 MDN 发现注意 pushState() 绝对不会触发 hashchange 事件，即使新的 URL 与旧的 URL 仅哈希不同也是如此。 Solution Vue-Router 的文档中给出两个方案 watch $route 对象 const User = { template: '...', watch: { $route(to, from) { // react to route changes... } } } 使用 beforeRouteUpdate const User = {

详解vue-router 初始化时做了什么

阅读更多关于详解vue-router 初始化时做了什么

vue router 的初始化使用步骤我们首先来看 vue-router 的使用步骤，然后再分别去看各个步骤都发生了什么。使用 vue-router 需要经过一下几个步骤：引入 vue-router： import VueRouter from 'vue-router'; 利用 vue 的插件机制，加载 vue-router： Vue.use(VueRouter); 实例化 VueRouter： const router = new VueRouter({ routes }) 实例化 Vue： const app = new Vue({ router }).$mount('#app'); Vue 的插件机制 vue 提供了一个 use 方法，来加载插件： Vue.use = function (plugin: Function | Object) { const installedPlugins = (this._installedPlugins || (this._installedPlugins = [])); if (installedPlugins.indexOf(plugin) > -1) { return this; } // additional parameters const args = toArray(arguments, 1); args

vue-router的hash 模式和 history 模式

阅读更多关于 vue-router的hash 模式和 history 模式

hash 模式 url 中带有#的便是 hash 模式，#后面是 hash 值，它的变化会触发 hashchange 这个事件。通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听 hashchange 来实现更新页面部分内容的操作： window .onhashchange = function ( event ) { console .log(event.oldURL, event.newURL); let hash = location.hash.slice( 1 ); document .body.style.color = hash; } 另外，hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。 history 模式 history api 可以分为两大部分，切换和修改 ① 切换历史状态包括 back,forward,go 三个方法，对应浏览器的前进，后退，跳转操作 history.go( -2 ); //后退两次 history.go( 2 ); //前进两次 history.back(); //后退 hsitory.forward(); //前进 ② 修改历史状态包括了 pushState,replaceState 两个方法,这两个方法接收三个参数:stateObj,title,url history

Vue中的 v-cloak 指令

阅读更多关于 Vue中的 v-cloak 指令

可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。 html： < div id = " app " > {{context}} </ div > js： < script > var app = new Vue({ el: '#app', data: { context:'互联网头部玩家钟爱的健身项目' } }); </ script > 效果：我们使用 v-cloak 指令来解决屏幕闪动的问题吧O(∩_∩)O~ js 不变，在 div 中加入 v-cloak 指令。 html： < div id = " app " v-cloak > {{context}} </ div > css： [v-cloak] { display : none ; } 使用 v-cloak 指令之后的效果（ demo ）：在简单项目中，使用 v-cloak 指令是解决屏幕闪动的好方法。但在大型、工程化的项目中（webpack、vue-router）只有一个空的 div 元素，元素中的内容是通过路由挂载来实现的，这时我们就不需要用到 v-cloak 指令咯。来源： oschina

Vue-Router 源码分析(二) 设计思想及代码结构

阅读更多关于 Vue-Router 源码分析(二) 设计思想及代码结构

根据VueRouter的执行流程，可以通过这三个步骤来理解它的设计思想: 第一步 :我们new VueRouter创建VueRouter实例的时候会通过深度遍历把传入的router属性对应的数组给解析一下，保存到一个Map中，每个Map对应router的一个元素，我们称之为路由记录，解析的时候会给每个路由记录增加一个正则表达式，用于<vuerouter-link>组件在渲染时查找哪个路由记录可以与之匹配第二步 :解析<router-link></router-link>组件的时候首先获取名为to的props(例如<router-link to="/login"><a>登陆</a></router-link>里的to属性)，然后会遍历第一步Map里的每个记录(路由记录)，并用路由记录中的正则去匹配这个to值，看看该正则是否能匹配，如果能匹配则表示可以渲染这个路由记录对应的组件了，然后通过Vue内部的$createElement全局函数渲染一个原生DOM标签(默认为a标签，可以通过<router-link/>组件的tag这个props去修改它)，渲染后会在这个DOM对象上绑定一个click事件，当click事件触发时，会调用VueRouter实例的push()方法去修改路由, 注意，VueRouter是通过click事件来触发路由的，不是通过a的href属性来触发

从头开始学习vue-router

阅读更多关于从头开始学习vue-router

一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问题，就是本篇要探讨的主要问题。二、vue-router是什么这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是WebApp的链接路径管理系统。 vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质就是建立起url和页面之间的映射关系。至于我们为啥不能用a标签，这是因为用Vue做的都是单页应用（当你的项目准备打包时，运行 npm run build 时，就会生成dist文件夹，这里面只有静态资源和一个index.html页面），所以你写的标签是不起作用的，你必须使用vue-router来进行管理。三、vue-router实现原理 SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时

从头开始学习vue-router

阅读更多关于从头开始学习vue-router

vueRouter动态路由匹配

阅读更多关于 vueRouter动态路由匹配

vueRouter动态路由匹配动态路由匹配需要安装vue-router 在控制台选择安装的路径 npm init --yes npm install vue-router -S html代码块 <!DOCTYPE html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " > < title > 动态路由匹配 </ title > </ head > < body > < div id = " app " > </ div > < script src = " https://cdn.jsdelivr.net/npm/vue/dist/vue.js " > </ script > < script src = " ./node_modules/vue-router/dist/vue-router.js " > </ script > </ body > </ html > js代码块 < script type = "text/javascript" > var ComDesc = { data ( ) { return { msg : '' } }

vue js how to validate the particular routes for the particular roles

阅读更多关于 vue js how to validate the particular routes for the particular roles

问题 In my application User wants the ability to create a role from the interface, and assign the pages to the role. Which Means both roles and routes are dynamic. Here in the example the routes to the roles are defined in the client. Where we have to assume that the user must be in the certain roles to be allowed to access that page. But I don't know which role needs to be assigned to that pages? Currently what I know is that we can check the whether the user is authenticated or not before

订阅 vue-router