vue--路由

一.vue路由的基本用法

对于单页面应用程序来说，主要通过URL中的hash（url地址中的#号）来实现不同页面之间的切换。
同时，hash有一个特点：HTTP请求中不会包含hash相关的内容。所以，单页面程序中的页面跳转主要用hash实现。
在单页应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）。
路由：进行监听网页中的路径

1. 导入路由模块
2. 创建组件模板对象
3. 创建路由对象
4. 书写路由匹配规则
5. 将路由对象注册到vm实例中，此可以进行监听url地址的变化
6. 使用–router-link to=’/login’–导航，使用router-view组件显示匹配到的组件
7. 也可通过配备项来实现样式的设置

 1.导入路由模块
    2.创建组件模板对象
          ----let login={
              template:'<h1></h1>'
          }
      3.创建路由对象
          ----let router=new VueRouter({
               4.书写路由匹配规则
                  每一个规则都是一个对象，必须拥有两个属性
                  path:监听的路径
                  component:表示要展示的对应的组件
                  redirect:根路径下，可重新组件的名称
              routes:[
                  {path:'/login'(监听的路径),component:login(创建的模板对象的名称)}
              ]
          })
      5.将路由对象注册到vm实例中，此可以进行监听url地址的变化
          let vm=new Vue({
              el:'',
              data:{},
              mathods:{},
              router
          })
      6.使用<router-link to='/login'></router-link>导航
          // 其中的'to'相当于a标签中的href
          //router-link标签将会被解析成a标签
          使用router-view组件显示匹配到的组件
          <router-view></router-view>
          //可通过 'router-link-active''router-link-exact-active'来实现高亮显示
      htm代码：
      <div id="app">
          <router-link to='/login'>登录</router-link>
          <router-link to='/login'>导航</router-link>
          <router-view></router-view>
      </div>
      
      7.也可通过配备项来实现样式的设置
          ---- //可通过 'router-link-active''router-link-exact-active'来实现router-link标签的高亮显示
          ----linkActiveClassL:'myClass(自定义的类名)'
              ----在style样式表中设置需要的样式

二.路由的参数的传递

路由中获取定义参数：
----可通过 <router-link to='/login？id=123'>登录</router-link>
   ----路径中直接传值
   ----通过路由对象this.$route.query.id直接将传递的参数传到路由模板
----let login={
   template:'<h1></h1>{{$route.jquery.id}}',
   data(){...可定义模板中的数据}
}
----通过params进行传值
   1.可通过路由匹配规则规定 /:id/:name
       {path:'/login/:id/:name',component:'login'} 
   2.route-link设置/id值/name值
       <router-link to='login/123/ccc'>登录</router-link>
       可通过this.$route.params对象获取

三.路由的嵌套

  ----1.在path中定义第三个参数，children，在children中定义新的路由规则
         ----{path:'/login',component:login,children:[
                 {path:'/',redirect:'112'}
                 {path:'112',component:red}
         ]}
   ----2.将定义的模板转换为<template></template>,在其中设置router-link，router-view

四.router-view中的渲染

   ----'router-view'拥有属性'name';
            ----1.书写组件模板对象
                    ----let tops={
                            template:'<h1 class="header">顶部</h1>'
                        }
                2.在创建路由对象router中，进行新的路由规则的制定
                    ----let router={
                        routes:[
                            {
                                path:'/',components:{
                                     defaultTop(自定义的创建的name名称):tops(自定义的组件创建模板对象名称),
                                }
                            }
                        ]
                    }
                3.通过router-view中的'name'属性进行相关的衔接
                    ----其中想指定样式，可通过在template中的代码字符串中定义类名，通过style进行样式的设置
                    ----<router-view name='defaultTop'></router-view>
                        <div class="content">
                                <router-view name='defaultLeft'></router-view>
                                <router-view name='defaultRight'></router-view>
                        </div>