Vue全家桶之vue-router

路由安装及配置
传参
- query
- params
导航
- this.$router
嵌套路由
路由守卫
前端路由模式hash和history
- 两种模式的实现原理
- 两种模式的区别
- 关于history模式下404的解决方案
vue-router原理剖析

路由安装及配置

总结插件使用：

安装 vue add router
选项配置 new VueRouter({ routes: [ { path: '/', name: 'home', component: Home } ] })
关联路由和Vue实例
留坑 <router-view />
导航 <router-link />

// 选项配置
import Vue from 'vue'
import Router from 'vue-router'Vue.use(Router);var router = new Router({//路由配置routes:[{path: '/login', component: Login},{path: '/register',component: Register}]
});export default router//关联
import router from './router'
new Vue({el:'#app',router
})// 导航及留坑
<div><h1>我是主页</h1><router-link to="/login">去登录页</router-link><router-link to="/register">去注册页</router-link><router-view></router-view>
</div>

传参

两种传参方式：

query

 http://www.xxx.com/login?id=1 <router-link :to="{ name: 'login',query:{ id:'abc' } }">登录页</router-link>

params (路由配置path:"/register/:sex")

 http://www.xxx.com/register/woman<router-link :to="{ name: 'register',params:{ sex:'woman' } }">注册页</router-link>

参数访问

可以通过this.$route获取路由信息中的参数

常用属性：

this.$route.name
this.$route.path
this.$route.params
this.$route.query
this.$route.hash
this.$route.meta(是否需要权限控制)
this.$route.children(子路由)

或者可以通过在路由配置中添加 props:ture 来便捷访问

{ path: "detail/:id", component: Detail, props: true }在组件中声明props: ['id']

则可以直接使用 this.id

嵌套路由

总结：

多个组件，按不同的锚点值部分填入不同的坑

中包含
路由规则中包含子路由，children属性

{name:'login',path: '/login', component: Login,//当嵌套路由中有多个router-view时，使用components进行指定各自对应的组件children:[{name:'woman', path:'woman',components: {"something": Woman,"music": Music}}]
},
{name:'register',path: '/register',component: Register,//嵌套路由配置children:[{name:'info', path:'info',component: Info}]
}

路由守卫

路由配置属性meta 配合路由守卫钩子来控制页面的权限访问。

全局前置守卫 beforeEach(to,from,next)

{path: '/about',name: 'about',meta: { requiresAuth: true },component: About
}router.$router.beforeEach(function(to, from, next){if(to.meta.requiresAuth){//放行next();} else {next({path:'/login'});}})

路由独享beforeEnter(to,from,next)

{path: '/about',name: 'about',meta: { requiresAuth: true },component: About,beforeEnter(to,from,next){// dosomething}
}

组件beforeRouteEnter(to,from,next)

试用场景：

路由复用，参数变化的请求（即params或者query改变）

对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候

完整的导航解析流程：

导航被触发
调用全局的beforeEach守卫
在重用的组件里调用beforeRouterUpdate守卫
在路由配置里调用beforeEnter
在被激活的组件里调用beforeRouteEnter
调用全局的beforeResolve守卫
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。

前端路由模式hash和history

前端路由原理：
锚点值页面不跳转，局部页面innerHTML的替换

两种模式的实现原理

hash 模式：
url上的部分锚点数据（#xxx）改变，不会导致浏览器向服务器发出请求，就不会刷新页面。hash值的改变会触发 hashchange() 事件，根据 hash 变化来实现更新页面部分内容的操作。

http://www.xxx.com/#/homewindow.addEventListener('hanshchange', function(){console.log(location.hash);
})

history 模式：
history 模式的实现，主要是 HTML5 标准发布的两个API，pushState和replaceState。通过这两个 API 可以改变 url 地址且不会发送请求.同时还有popstate事件。这样就可以监听url变化来实现更新页面部分内容的操作。

http://www.xxx.com/homewindow.addEventListener('popstate', function(){console.log(location.url);
})

两种模式的区别

url显示上，hash模式会有“#”，history模式没有
兼容性，hash可以兼容低版本浏览器和IE
history模式在刷新页面或者直接输入url回车时，还是会给服务器发送请求。如果没有处理会返回404.一般的解决方式是由后端配合将页面重定向到某个具体的页面，如首页。

关于history模式下404的解决方案
这里使用Nginx代理
步骤：
（1）发布 npm run build
（2）下载nginx
（3）配置conf/nginx.conf

#前端设置了baseUrl的对应配置
server {listen 80;server_name localhost;#charset koi8 - r;#access_log logs / host.access.log main;root C:\Users\yuanz\Desktop\Webfullstack\Vue\01_vue_component\dist; #单页面项目的打包后的dist目录# http://localhost/detail/1# http://localhost/js/about.8187b66d.js# 若是静态文件请求则直接返回，否则直接重定向到index.htmllocation / {try_files $uri /index.html;}#nginx反向代理，实现接口转发location ^ ~ /api/ {proxy_pass http://localhost:3000; #注意路径后边不要加/
}

（4）起服务器 start nginx

vue-router原理剖析

通过源码来分析路由是如何通过URL的改变通知页面更新的。

实质上是借助了Vue的响应式数据，current通过new Vue()定义为响应式数据，它涵盖了当前路由的元信息，如：path、params、query、name等。所以只需要监听current的变化来触发页面render即可。

使用Vue.component定义全局组件router-link 和router-view

下面是一个简写版的vueRouter，帮助理解。

class VueRouter {constructor(Vue, options) {this.$options = optionsthis.routeMap = {}// 通过new一个Vue实例，将当前路由变为响应式this.app = new Vue({data: {current: '#/'}})this.init()this.createRouteMap(this.$options)this.initComponent(Vue)}// 初始化 hashchangeinit() {window.addEventListener('load', this.onHashChange.bind(this), false)window.addEventListener('hashchange', this.onHashChange.bind(this),false)}createRouteMap(options) {options.routes.forEach(item => {this.routeMap[item.path] = item.component})}// 注册组件initComponent(Vue) {Vue.component('router-link', {props: {to: String},render: function (h) {// h <==> createElement// <a :href="to"><slot></slot></a>return h("a",{ attrs: { href: this.to } },this.$slots.default);}})const _this = thisVue.component('router-view', {render(h) {var component = _this.routeMap[_this.app.current]return h(component)}})}// 获取当前 hash 串getHash() {return window.location.hash.slice(1) || '/'}// 设置当前路径onHashChange() {this.app.current = this.getHash()}
}