router优点 vue_vue-router 基础知识点总结

功能

vue-router实现vue的单页面应用，vue的官方路由器，与vue核心深度集成，使vue构建单页面程序变得轻而易举

嵌套路由/视图映射

模块化，基于组件的路由器配置

路由参数，查询，通配符

查看由vue过渡系统提供动力的过渡效果

细粒度的导航控制

与自动活动css类的链接

HTML5历史纪录模式或哈希模式，在IE9中具有自动备用

可自定义的滚动行为

路由原理

与传统开发方式的区别

1 传统的开发方式，url改变后，立刻发生请求响应整个页面，有可能资源过多，可能出现白屏

2 SPA 单页面应用 主要的作用

锚点值改变后 不会立刻发送请求，而是在某个合适的时机，发送ajax请求局部改变页面的数据

优点：页面布不立刻跳转 用户体验好

模拟vue-router

登陆var app=document.getElementById('app');

window.οnhashchange=function(){

console.log(location.hash);

switch(location.hash){

case '#/login':

app.innerHTML='

THIS IS LOGIN PAGE

';

break;

}

}

使用vue-router

vue-router必须配vue使用

让vue使用vue-router

vue.use(Router);//vue是局部作用域需要，全局的时候不需要

挂载vue-router

Vue.component({

template:'

login page

'});newRouter({

mode:'',

routes:[

{

path:'/login',

component:Login

}