1.作用 将不同的url对应不同的组件 ，比较适合单页面开发 vue-router是vue的一个插件，需要安装使用 2.安装 1.cdn 2.npm 3.vue-router.js 3.基本使用
new Vue({ components:{ "student":{ template:`` } } }); 1.定义组件 var student={ template:`` } 2.定义路由 var router=new VueRouter({ routes:[{ path:'/student', component:student },{}] }) 3.挂载路由到vue实例 new Vue({ el:'#app', router });4.router-link标签中的to属性 <router-link :to=’{path:’/student’}’> 通过query传递参数，参数会拼接到地址栏 获取参数：在当前组件中使用 r o u t e . q u e r y < r o u t e r − l i n k : t o = ′ p a t h : ′ / s t u d e n t ′ , q u e r y : i d : 1 ′ > < / r o u t e r − l i n k > 通 过 p a r a m s 传 递 参 数 获 取 参 数 ： 在 当 前 组 件 中 使 用 route.query <router-link :to='{path:'/student',query:{id:1}}'></router-link> 通过params传递参数 获取参数：在当前组件中使用 route.query<router−link:to=′path:′/student′,query:id:1′></router−link>通过params传递参数获取参数：在当前组件中使用route.params 如果使用parmas发送参数，需要使用路由名称进行跳转 <router-link :to=’{name:‘student’,params:{id:1}}’>
5.命名路由+重定向 var router=new VueRouter({ routes:[{ path:’/student’, name:“student-a”,//给路由命名，发便路由跳转传参 component:student },{ path:’/teacher’, name:‘teacher-a’, component:teacher }] });
6.动态路由 动态路由类似新闻详情页 只需要开发一次，传递不同参数，加载不同内容 参数使用:连接 path:’/details:id’
默认情况下，由于vue的高效率渲染机制，不会将同一个组件进行销毁并重新加载 导致生命周期钩子函数不会反复执行 监听$route7.嵌套路由-多级路由 路由父子关系 1.创建子组件 2.嵌套router-link标签 并且嵌套router-view 3.在路由中new VueRouter()给当前路由添加子路由阿属性 children:[{ path:’/a’, component:a },{}]
