初学vue-router

vue-router官网

什么是路由？

• 路由：就是通过互联的网络把信息从源地址传输到目的地址的活动。—维基百科
• 看到路由我们可能想到的是路由器，那什么是路由器？
• 路由器提供了两种机制：路由和转送
• ①路由是决定数据包从来源到目的地的路径
• ②转送将输入端的数据转移到合适的输出端
• 路由中有一非常重要的概念叫路由表
• 路由表本质上就是一个映射表，决定了数据包的指向

前端渲染和后端渲染

• 后端路由阶段
  • 早期的网站开发整个HTML页面是由服务器来渲染的。
    • 服务器直接生产渲染好对应的HTML页面，返回给客户端进行展示。
  • 但是，一个网站，这么多的页面服务器如何处理呢？
    • 一个页面有自己对应的网址，也就是URL。
    • URL会发送到服务器，服务器会通过正则对该URL进行匹配，并且最后交给一个Controller进行处理。
    • Controller进行各种处理，最终生成HTML或者数据，返回给前端。
    • 这就完成了一个IO操作。
  • 上面这种操作，就是后端路由
    • 当我们页面中需要请求不同的路径内容时，交给服务器来进行处理，服务器渲染好整个页面，并且将这个页面返回给客户端。
    • 这种情况下渲染好的页面，不需要单独加载任何的js和css，可以直接交给浏览器展示，这样有利于SEO优化，但也存在很多缺点，比如难维护等。
• 前后端分离阶段
  • 随着Aiax的出现，有了前后端分离的开发模式。
  • 后端只提供API来返回数据，前端通过Ajax获取数据，并且可以通过JavaScript将数据渲染到页面。
  • 前端渲染：浏览器中显示的网页中的大部分内容，都是由前端写的js代码在浏览器中执行，最终渲染出来的页面。
    
• 单页面富应用阶段（SPA）
  • 其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由。
  • 也就是前端来维护一套路由规则。
  • 前端路由的核心是改变URL，但是页面不进行整体的刷新。
  • 那怎么实现呢？

// 1 URL的hash
location.hash='foo'
// 2 HTML5的history模式：pushState 可以回退
// history.pushState(data,title,?url)
history.pushState({},'','foo')
// 3 HTML5的history模式：replaceState()  不可以回退
history.replaceState({},'','foo')
// 4 history.back() 回退
history.back() == history.go(-1)
history.forward() == history.go(1)
// pushState()入栈，back()出栈

前端路由------也就是管理路径和页面的映射关系，渲染不用经过服务器。

vue-router的学习(Vue 2x)

1. vue-router是基于路由和组件的
   • 路由用于设定访问路径，将路径和组件映射起来。
   • 在vue-router的单页面应用中，页面的路径的改变也就是组件的改变。
2. 安装和使用vue-router

// 步骤一：安装vue-router
npm install vue-router --save
// 步骤二：在模块化工程使用它（因为是一个插件，所以可以通过Vue.use()来安装这个路由功能）
// 前提准备工作
import VueRouter from 'vue-router'
import Vue from 'vue'
// 1 通过Vue.use(插件),安装插件
Vue.use(VueRouter)
// 2 创建VueRouter对象,
const routes = [
// 配置路径和组件之间的关系
]
const router = new VueRouter({
routes
})
// 将router对象传到Vue实例中
export default router

路由懒加载

官方给出的解释是：
	1 当打包构建应用时，javascript包会变得非常大，影响页面加载
	2 如果能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就会更加高效。

那么路由懒加载做了什么呢？

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

实现方式

// 结合Vue的异步组件和Webpack的代码分析
const Home = resolve => { require.ensure(['../componenets/Home.vue'],() => {resolve(require('../components/Home.vue'))})};
// AMD写法
const About = resolve =>(['../comonents/About.vue'],resolve);
// 使用了箭头函数（这是ES6写法，也是推荐的写法）
const Home = () => import('../components/Home.vue');

实现嵌套路由

3. 创建对应的子组件，并且在路由映射中配置对应的子路由
4. 在组件内部使用 router-view 标签。

vue-router 传递参数

传递参数主要有两种类型：params和query
 params的类型
 1. 配配路由格式：/router/:id
 2. 传递的方式：在path后面跟上对应的位置
 3. 传递后形成的路径：/router/123,/router/abc
 query的类型
 4. 配置路由的格式：/router，也就是普通配置
 5. 传递的方式：对象中使用query的key作为传递方式
 6. 传递后形成的路径：/router?id=123,/router?id=abc

导航守卫

@导航守卫

前置守卫
router.beforeEach((to,from,next)=>{
to:即将要进入的目标 路由对象
from:当前导航正要离开的路由
next:一定要调用该方法来resolve这个钩子。执行效果依赖next方法的调用参数。
})
后置钩子
router.afterEach((to,from)=>{

})

文件路径起别名

开发一个项目，有时候文件夹太多，导致在需要输入路径的地方出现多个../../，甚至有时候在挪动文件夹后，原本路径失效，为了防止这种情况的出现，一般都会给文件起个别名。

在webpack.base.conf.js文件下配置

在标签中引入则需要在文件夹前面加上~

在js文件中导入则不需要加~