路由：vue-router 1.作用
将不同url对应不同的组件，比较适合单页面开发 vue-router是vue的一个插件，需要安装使用 **2.安装** 1.cdn 2.npm 3.vue-router.js **3.基本使用** 1.定义组件 var students={ template:`` } 2.定义路由 var router=new VueRouter({ routes:[{ //多个路由对象 path:'/student', component:student },{}] }) 3.挂载路由到vue实例 new Vue({ el:'#app, router //相当于router:router }) 4.显示 <router-view></router-view>4.router-link标签中的to属性
<router-link to="/student">跳转到student</router-link> <router-link :to="{path:'/student'}">跳转到student</router-link> <router-link :to="student">跳转到student</router-link> //student是data中的变量 student:{path:'/student'} 通过query传递参数,参数会拼接在地址栏 获取参数：在当前组件中使用$route.query <router-link :to="{path:'/student',query:{id:1}}">跳转到student</router-link> 通过params传递参数,参数不会拼接在地址栏上 获取参数：在当前组件中使用$route.params 可在created阶段获取 <router-link :to="{path:'/student',params:{id:1}}">跳转到student</router-link> 如果使用params发送参数，需要使用路由名称进行跳转 <router-link :to="{name:'/student',params:{id:1}}">跳转到student</router-link>5.命名路由+重定向
入口路由或页面默认加载哪个页面都要用到重定向 var router=new VueRouter({ routes: [{ path:'/', redirect:'/student' //默认展示student页面 },{ path:'/student', name:'student-a',//给路由命名，方便路由跳转，并传参 component:student, },{ path:'/teacher', name:'teacher-a', alias:'/a', //别名 component:teacher, },{ path:'/user', name:'user-a', redirect:'/teacher', //重定向，跳转到teacher页面 component:user, }] })6.动态路由
动态路由类似于新闻详情页 只需要开发一次，传递不同参数，加载不同内容 参数使用:连接 path:'/details:id' 默认情况下，由于vue的高效渲染机制，不会将同一个组件进行销毁并重新加载 导致生命周期钩子函数不会反复执行 监听$route watch:{ '$route':function(newobj,oldobj){ alert() } },7.嵌套路由-多级路由
路由父子关系 1.创建自组件 2.嵌套router-link标签，并且嵌套router-view 3.在路由new VueRouter()给当前路由添加子路由属性 children:[{ path:'/a', component:a },{}]相关例子请见下方链接： router.html 动态路由.html 嵌套路由.html
