VUE学习笔记—路由
1、前端渲染与后端渲染
后端渲染：后端生成html+css直接传输到前端进行展示(没有js)。
前端渲染：浏览器中显示的大部分内容都是由前端写的js代码在浏览器执行，最终渲染出来的页面；
后端路由：后端处理url跟页面之间的映射关系，比如spring mvc，这种处理方式被称作后端路由；
前端路由：
- 前后端分离阶段：后端只负责提供数据，不负责任何页面的内容，前端依赖ajax技术，获取数据进行渲染；
- SPA阶段：前端在前后端分离的基础上，加了一套路由处理机制；
其实，不考虑路由，jquery的$.load(url)也可以认为是SPA应用。因为这个也可以将所有资源(html,css,js)汇集到一起，然后页面直接请求该url进行局部刷新。
2、url的hash跟H5的history
修改location.href可以对页面进行刷新，而修改location.hash则可以修改地址栏的url而不刷新页面。
history对象有许多方法，比较重要的有pushState，back，go，forward及replaceState；
pushState跟replaceState的都可以修改url，区别是前者为压栈操作，可以回退，后者不可以。
go的参数为数字，可以指定前进后退的步数。forward跟back则分别为单步的前进后退。
3、vue-router基本使用
vue-router跟vue是深度绑定的，主要作用就是将url跟组件映射起来。
使用步骤：
1、安装
npm install vue-router --save
2、配置
在/router/index.js中配置
import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)
const routes = []
const router = new VueRouter({routes})
export default router
3、在main.js导入
import Vue from 'vue'
import App from './App'
import router from './router/index.js'
new Vue({
el:'#app',
router,
render: h=>h(App)
})
4、使用路由，通过
router-link用于导航菜单，默认渲染为，router-view用于内容占位。
注意，tag，replace, active 等属性的使用。
当然，router-link也可以替换为其它标签，然后使用事件响应，调用$router.pushState()等方法来使用。
4、懒加载
当app较大的时候，页面一次性加载一个很大的js文件是非常费时的，根据路由进行处理的懒加载将很好的解决这一问题。
es6中懒加载的写法：
//原代码
import Home from '../components/Home'
//懒加载写法
const Home = () => import('../components/Home.vue')
5、路由嵌套
步骤：
a、创建对于的子组件，并且在路由映射中配置对于的子路由；
b、在组建内部使用
主要代码示例：
{
path: '/home',
component: Home,
children: [
{
path: 'news', //注意子路由path没有斜杠,配router-link的时候，但还是要斜杠的
component: HomeNews
},{
path: 'message',
component: HomeMessage
}
]
}
6、路由传值
主要有两种方式：params跟query
params的处理：
a、配置路由格式：/router/:id ； //路由js文件
b、传递的方式，在path后跟上对应的值； //router-link
c、通过$route.params.id进行获取；
最终生成的路径：/router/123
query方式：
a、配置路由格式router
b、router-link用:to="{path:'/profile', query:{'a':123,'b': 456}}"
c、通过$route.query进行获取
最终胜出的路径：/profile?a=123&b=456
可以发现，两者在最终生成的url上是不一样的；前者作为url的一部分，后者为url中queryParam的一部分(也是属于url的)；
$route跟$router的区别：
$router为VueRouter实例，想要导航到不同的URL，可使用$router.push方法；
$route为当期router跳转对象，可以获取name、path、query、params等属性；
7、导航守卫
有了路由之后，终于可以在不同页面之间进行自由切换了。有时候可能有些需求，想要在切换之间做些什么，比如切换的同时，更改页面的title，这就要用到导航守卫。
所谓导航守卫，完全是方法名直译。
router.beforeEach()方法接受的参数也是一个函数，这个函数的名字在源码中叫做NavigationGuard，有三个参数(from, to, next),from跟to分别代表跳转前后的route对象，next为跳转流程函数，记着在beforeEach()一定要执行即可，不执行会导致跳转终止。so，该需求可以这么写：
router.beforeEach(function (from, to, next){
document.title = to.matched[0].meta.title;
next();
})
以上代码中的meta是在路由中配置的，matched数组的第一个元素是目标路由对象；直接调用to对象的meta对象，有时会导致嵌套路由无法获取到meta对象(嵌套路由)；
其他还有路由独享守卫、组件守卫等，参数跟用法相同；
8、keep-alive
keep-alive是vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
keep-alive有两个重要属性：
include：字符串或者正则，匹配的组件会被缓存；
exclude：字符串或正则，匹配的组件不会被缓存；
router-view也是一个组件，如果直接被包在keep-alive里边，所有路径匹配到的视图组件都会被缓存；
