Vue-router，路由

概念

• 前端路由：
  现代前端开发中最流行的页面模型，莫过于SPA单页应用架构。单页面应用指的是应用只有一个主页面，通过动态替换DOM内容并同步修改url地址，来模拟多页应用的效果，切换页面的功能直接由前台脚本来完成，而不是由后端渲染完毕后前端只负责显示。
  - 后端路由
  后端路由又可称之为服务器端路由，因为对于服务器来说，当接收到客户端发来的HTTP请求，就会根据所请求的相应URL，来找到相应的映射函数，然后执行该函数，并将函数的返回值发送给客户端。

实现登录功能切换

效果图

1. 引入和创建路由

 <!-- 引入路由 -->
         <script src="./js/vue-router.js"></script>
         ------------------------------------------------------------------------------
         //创建一个路由对象，当导入Vue-router包之后，在window全局对象中就有了一个路由的构建函数
//在new 路由对象的时候，可以位构造函数，传递一个配置对象
var rterObj= new VueRouter({
    //route  这个配置对象中的route表示【路由配置规则】的意思
    
    routes:[//路由配置规则
    //每个路由规则，都是一个对象，这个规则对像有来个必须的属性：
    //1.path表示监听哪个 路由地址
    //2.是component，表示如果路由时前面匹配到的path，则展示component 属性对应的哪个组件
  //component必须是一个组件模板对象不能是一个名称
  {path: '/',redirect: '/login'},//这里的redirect，用来这个默认展示组件
    {path:'/login',component: login},
    {path:'/regester',component: regester}


    ]
})

2. 把路由加到vue中

 new Vue({
      el:'#app',
      methods: {
          
      },
      router: rterObj//将路由规则对象，注册到vm中，用来监听URL地址的变化，然后展示对应的组件

    })
    </script>

3. 展示

<div id="app">
    <!--router-link 默认渲染a标签，to接地址  tag=“” 可以改变标签，不过也有跳转-->
    <router-link to="/login">登录</router-link>
    <router-link to="/regester">注册</router-link>
    <!-- vue-router提供的元素，专门用来当占位符的，将来，路由规则匹配搭配的组件，就会展示到这里 -->
       <!--transition动画标签  -->
    <transition mode="out-in">
            <router-view></router-view>
       </transition>
   
        
</div>

4. 设置动画样式

   <!-- 位router-link设置样式 -->
         <style>
         .router-link-active{
             color: blue;
             font-weight: 100;
             font-style: italic;
             font-size: 80px;
            text-decoration: underline;
            background-color: bisque

         }
         .v-enter,.v-leave-to{
               opacity: 0;
transform: translateX(80px)
           }
         .v-enter-active,.v-leave-active{
             transition: all 0.5s ease
         }
         </style>