vue-router

$route -> 使用它的属性 $router-> 使用它的方法 编程式的导航，即js控制跳转 //声明式：<router-link :to="..."> //编程式：this.$router.push('home') 另一种跳转 //声明式：<router-link :to="..." replace> //编程式：this.$router.replace('home') $router.push 放入跳转的路由/路径 想要导航到不同URL，则使用 router.push 方法 //比如：this.$router.push('/c') push可以是字符串可以是对象也可以带查询参数 //字符串 router.push('home') // 对象 router.push({ path: 'home' }) // 命名的路由 router.push({ name: 'user', params: { userId: '123' }}) // 带查询参数，变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) $router.go 在 history 记录中向前或者后退多少步，类似window.history.go(n) // 在浏览器记录中前进一步，等同于

PWA是progress web app的缩写，是一种理念，使用多种技术来增强web app的功能，可以让网站的体验变得更好，能够模拟一些原生功能，比如通知推送。 history模式 如果不希望看到丑陋的 # 可以使用history模式 ， 其原理依赖于 history.pushState函数 a标签点击以后，如果没有# 必然会页面跳转发起请求 使用pushState函数可以改变url 比如 /abc 而不会发起请求 js通过location.pathname获取该值 /abc 做页面局部的替换 router-view的history简单实现原理 router-view实现图解 自制webpack插件实现骨架屏 原理分析： 1: 从路由A跳到路由B慢不慢？ 你敢说慢？ 因为A的时候各种js已经加载好了ok 2: 那到底是什么比较慢 ？ A的首次加载 慢会带来什么？ 1: 首屏白屏(量太大，渲染好久) 2: 首屏卡顿(加载一半，一半卡住) 解决方案： 1: 客户端太慢，渲染容易卡住。。 服务端渲染好页面，客户端就加载个html完事 2: 白屏也不错，但是如果能有个骨架屏，看起就爽了 插件实现思路 需要在vue的执行代码加载之前，先让用户看到骨架屏，带app代码执行 new Vue() 替换<div id="app"></div> 就好了 决定加载什么js的是index.html

vue项目基础结构 一个vue的项目，我觉得最小的子集其实就是{vue,vue-router,component}，vue作为基础库，为我们提供双向绑定等功能。vue-router连接不同的"页面"，component作为样式或者行为输出，你可以通过这三个东西来实现最基本的静态SPA网站。当然我在这里不谈vue全家桶这样宽泛的概念，我会如数家珍的把主要的技术点一一列举。 1.vue-cli：搭建基本的vue项目骨架，脚手架工具 2.sass-loader&node-sass:我是使用的sass作为样式的预编译工具，两者缺一不可，大家也可以自行选择，less,stylus都可以 3.postcss:实现响应式布局的关键，px=>rem。大漠已经提出了基于vw,vh的布局方案，不过我暂时持观望态度。 4.vuex:管理复杂的数据流向，状态机工具，特化的Flux 5.vuex-persistedstate:将vuex中state持久化的工具 6.vue-router:实现SPA间“页面”之间的跳转 7.vue-lazyload:实现图片的懒加载，优化http传输性能 8.vue-awesome-swiper:轮播功能的实现及一些特殊切换效果的完成 9.better-scroll:实现列表滚动及父子组件间的滚动问题 10.axios:http工具，实现向API请求数据，以及拦截器的实现

结构图 一、前言 在上一篇 vue-router总结 -- 基础使用 中，简单介绍了vue-router的安装、引用、嵌套路由、路由传参和重定向等内容，这是系列的第二篇，主要总结一下路由钩子函数的使用方法和一些常见的使用场景。 二、三大类钩子函数 路由钩子函数就是在发生路由跳转时，在每个时机调用的函数。这些函数分为三大类： 1.全局钩子函数 全局钩子函数有两个： beforeEach 和 afterEach ，由路由实例调用执行。 (1) beforeEach 进入路由之前被调用，通常进行判断登录状态、鉴权等操作。 应用：登录拦截，部分地方使用伪代码形式（因为懒啊） import Vue from 'vue' import Router from 'vue-router' import Home from './components/Home' import About from './components/About' Vue.use(Router) const router = new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About, meta: { auth: true // 该路由需要登录权限

从入口文件index.js中我们可以看到暴露出了一个VueRouter类,这个就是我们在 vue 项目中引入 vue-router 的时候所用到的new Router() 其中具体内部代码如下(为了方便阅读,省略部分代码) export default class VueRouter { constructor (options: RouterOptions = {}) { this.app = null this.apps = [] this.options = options this.beforeHooks = [] this.resolveHooks = [] this.afterHooks = [] this.matcher = createMatcher(options.routes || [], this) let mode = options.mode || ‘hash’ this.fallback = mode === ‘history’ && !supportsPushState && options.fallback !== false if (this.fallback) { mode = ‘hash’ } if (!inBrowser) { mode = ‘abstract’ } this.mode = mode switch (mode) { case

配置router文件 新建一个文件夹router，再在新建的router文件夹里新建一个index.js文件 index.js import Vue from 'vue' import Router from 'vue-router' import Home from '../components/HelloWorld.vue' Vue.use(Router) export default new Router({ routes:[{ path:'/', component:HelloWorld }] }) 同时，配置main.js文件 main.js import Vue from 'vue' import App from './App.vue' import router from "vue-router" Vue.config.productionTip = false new Vue({ router, render: h => h(App), }).$mount('#app') 来源： oschina 链接： https://my.oschina.net/u/4327137/blog/3167755