2019-04-30 路由概述

简介

前端路由简单的说，就是业内的跳转

进行不同组件之间的切换

使用

1. 导入包

2. 创建一个路由对象，当导入包之后，就有一个路由的构造函数，VueRouter，在创建路由对象时，可以传入一个配置对象，这个匹配对象中的route表示（路由匹配规则）的意思

   1. 路由匹配规则，每个路由规则都是一个对象，这个规则对象，身上都必须偶两个属性

      1. path：表示监听那个路由连接地址

      2. component：表示如果路由是起那么匹配到的path，则暂时component属性对应的那个组件，这个地方必须是一个组件的对象，而不是组件的引用名称

         例如使用var login={

         ​ template:""

         }这个login是对象

         Vue.component('login',{

         ​ template:''

         })，这个login就是一个名称

3. 将路由规则对象注册到Vue实例上，用来监听URL地址 ，然后展示对应的组件

也就是说

1. 导包
2. 创建路由规则对象
3. 将路由规则对象注册到Vue实例中
4. 绑定到对应的vm实例上
5. 将router-view注册到页面中

注意，第二步，创建路由对象时，其中的路由规则数组是“routes”

第四步，在将路由规则绑定到vm实例时，是router

2. var routerObi=new VueRouter({
       routes:[
           {path:'',component:},
       ]
   });
   

   注意，path是地址栏显示的数据，component是组件对应的对象，不是字符串

3. OK

4. router:routerObj
   

注意Vue中的路由是基于hash的，所以对它的调用的路由路径前面需要加上“#/XXX”

登录
注册

但是不推荐使用a连接的方式进行跳转，Vue封装了一个自定义的组件，默认渲染一个a标签，但是可以通过tag属性，传入标签的值来渲染别的标签

登录
注册

但是需要注意的是这个标签需要在vue对应实例标明的区域使用

重定向

也就是网页默认的url地址栏中的后缀，为了使一开始有一个固定的地址对应的组件，所以可以加上一个默认情况下的重定向属性，在路由规则中加上一个规则

{path:'/',redirect:'/login'}

这样就可以值初始化的时候默认进入login的组件，并且页面显示地址栏也是对应的path

选中高亮

对于router有一个.router-link-active，当选中一个路由时，就会默认给该路由的组件中添加上这个类，所以，我们只用给这个类添加一些样式，就可以实现点击高亮或者其他的样式

可以通过在创建路由对象时，在routes同级修改linkActiveClass属性值来修改使用哪一个类可以使选中高亮

var routerObj=new VueRouter({
    routes:[
        {path:'/',redirect:'/login'},
        {path:'/login',component:login},
        {path:'/register',component:register},
    ],
    linkActiveClass:'myRouterActive'
});

路由添加动画

还是可以直接包裹在transition标签中

---

    
    
    
    
    
    





    登录
    注册
    
        
    

路由点击触发切换页面的原理是：

点击按钮触发地址栏修改成XXX#/XXX，地址的修改触发路由，让路有监听到，是路由进行路由匹配，看路由的[]中有没有对应的path，如果有，就获取对应的component值指向对应的组件，从而显示其对应的组件信息