路由router

路由：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