Vue-router，从基础入门到手拿大厂Offter，看这篇文章就够了。

Vue-router（单页面路由）

Vue-router的安装

· 1. 直接下载使用
下载地址:https://unpkg.com/vue-router/dist/vue-router.js
使用，在页面

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

因为需要依赖 vue所以需要导入
2. 使用Npm安装到本地，或者安装到全局

npm i -S vue-router

然后同样的方式引入即可。

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

你如果是工程化构建的目录，需要在添加use，注册VueRouter

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

使用vue-router（路由）

 <div id="box">
        <a href="#/login">登陆</a>
        <a href="#/register">注册</a>
        <router-view></router-view>

    </div>
    <script>
        /**要想有路由第一步
          * 1 srcipt引入路由文件或者（工程目录）use注册
          * 2 实例化router 添加监听 routes 添加监听路径 path，注册监听显示的组件
          * 3 将 实例化router对象 注册到vm的router中
          * 4 在页面中写占位符 router-view
          */
        // 这是登陆页模板组件对象
        let login ={
            template:"<div>这是登录页模板</div>"
        }
        // 这是注册页的模板对象
        let register ={
            template:"<div>这是注册页的模板</div>"
        }
    //实例化路由对象
    let RouteObj = new VueRouter({
        routes:[//这里是吧router去r变s表示多个路由规则
            {path:'/login',component:login},
            {path:'/register',component:register}
        ]
    })
     let vm = new Vue({
         el:"#box",
         router:RouteObj  //将实例对象注册到vm中
     })   
    </script>

使用 router-link

为什么要用这个。因为在a标签中写路径 #/***,不是很麻烦，所以router提供了一个占位符
router-link，解析会默认解析为a标签。可以指定解析，用tag。路径就用to，这样写

 <!-- <a href="#/login">登陆</a>
        <a href="#/register">注册</a> -->
         <router-link to="/login" tag="span">登陆</router-link><!--tag 指定解析成的元素  to跳转的hash地址-->
        <router-link to="/register" tag="span">注册</router-link>

路径的重定向

当你打开网页的时候是不是路径就是（#/）是这样的
我们肯定是希望，打开就是登陆，所以，就要监听路径，当有#/这个路径，就redirect到#/login

//实例化路由对象
    let RouteObj = new VueRouter({
        routes:[//这里是吧router去r变s表示多个路由规则
            {path:'/',redirect:'/login'},//路径重定向
            {path:'/login',component:login},
            {path:'/register',component:register}
        ]
    })

更改激活状态的显示，原来是有内置的class名（router-link-active）

想更改这个内置的名，
第一种最暴力的就是把名字拿过来直接添加样式，
第二种官方也提供了一个方法，在构造函数中添加配置项，
linkActiveClass=“clsaaname”，这样就可以更改激活状态的名字，用自己定义的class名字去定义状态显示

 //实例化路由对象
    let RouteObj = new VueRouter({
        routes:[//这里是吧router去r变s表示多个路由规则
            {path:'/',redirect:'/login'},
            {path:'/login',component:login},
            {path:'/register',component:register}
        ],
        linkActiveClass:'active',
    })

使用router中的keep-alive，缓存组件。减少页面二次渲染

这是利用vue2.0版本中keep-alive的 inclide（包含缓存）和exclude（排除缓存）

<div id="box">

        <router-link to="/login" tag="span">登陆</router-link>
        <!--tag 指定解析成的元素  to跳转的hash地址-->
        <router-link to="/register" tag="span">注册</router-link>
        <keep-alive exclude="reg">   <!--include='name'要缓存的  exclude="reg"不被缓存的  -->
            <router-view ></router-view>
        </keep-alive>
        <!-- <router-view v-if="!$route.meta.keepAlive"></router-view> -->

    </div>
    <script>
        // 这是登陆页模板组件对象
        let login = {
           name:'log',
            template: "<div>这是登录页模板</div>"
        }
        // 这是注册页的模板对象
        let register = {
            name:'reg',
            template: "<div>这是注册页的模板</div>"
        }
        //实例化路由对象
        let RouteObj = new VueRouter({
            routes: [ //这里是吧router去r变s表示多个路由规则
                {
                    path: '/login',
                    component: login,
                    
                },
                {
                    path: '/register',
                    component: register,
                    
                }
            ],

        })
        let vm = new Vue({
            el: "#box",
            router: RouteObj //将实例对象注册到vm中
        })
    </script>

如果用的是vue1.0的版本的话

 <div id="box">

        <router-link to="/login" tag="span">登陆</router-link>
        <!--tag 指定解析成的元素  to跳转的hash地址-->
        <router-link to="/register" tag="span">注册</router-link>
        <keep-alive>   <!--include='name'要缓存的  exclude="reg"不被缓存的  -->
            <router-view v-if='$route.meta.keepAlive'></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>

    </div>
    <script>
        // 这是登陆页模板组件对象
        let login = {
           name:'log',
            template: "<div>这是登录页模板</div>"
        }
        // 这是注册页的模板对象
        let register = {
            name:'reg',
            template: "<div>这是注册页的模板</div>"
        }
        //实例化路由对象
        let RouteObj = new VueRouter({
            routes: [ //这里是吧router去r变s表示多个路由规则
                {
                    path: '/login',
                    component: login,
                   meta:{
                        keepAlive:true //需要缓存
                   }
                    
                },
                {
                    path: '/register',
                    component: register,
                    meta:{
                       keepAlive:false
                   }
                }
            ],

        })
        let vm = new Vue({
            el: "#box",
            router: RouteObj //将实例对象注册到vm中
        })
    </script>

给组件添加动画效果

先给大家说一下步骤，在后面会专门讲到动画是怎么用的。

第一步 用transition把需要动画的组件包起来

 <transition  mode='out-in'>//mode='out-in'这是过渡样式
                <router-view></router-view>
        </transition>

第二步，添加过渡样式

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

这样就可以了，先讲一点动画
在进入/离开的过渡中，会有 6 个 class 切换。
分为两个半场动画，进入和离开

• enter进入

  • v-enter：进入前 ( opacity: 0;)
  • v-enter-active： 进入时 ( opacity: 1;)
  • v-enter-to:进入后

• leave 离开

  • v-leave: 离开前
  • v-leave-active：离开时( opacity: 1;)
  • v-leave-to: 离开后 ( opacity: 0;)

路由匹配中传参数

在点击的按钮触发匹配，然后带个参数，匹配规则不变，可以传递参数过去

1. query

  <router-link to="/login?id=20" tag="span">登陆</router-link>

按钮把值交给实例对象，实例对象正则匹配出值。放在query中

  // 这是登陆页模板组件对象
        let login ={
            template:"<div>这是登录页模板{{$route.query.id}}</div>",
            created() {
                console.log(this.$route.query.id)
            },
        }

2. params
   匹配带有id的路径

<router-link to="/login/20&张三" tag="span">登陆</router-link>

一个是自己设置好，一个是在匹配路由中设置规则。

{path:'/login/:id&:name',component:login},

路由的嵌套 children

写这代码遇到很多坑，我自己一直迷。既然是路由的嵌套。肯定要有
两个，不然怎么去区分到底填到哪个内容里？

 <div id="box">
        <router-link to='/father'>father</router-link>
        <router-view></router-view>
        
    </div>
    <template id="father">
            <div>
                <h1>这是父级路由</h1>
                <router-link to='/father/son1'>儿子1</router-link>
                <router-link to='/father/son2'>儿子2</router-link>
                <router-view></router-view>
            </div>
    </template>
    <script>
        let fathers = {
            template: '#father'
        }
        let son1s ={
            template:"<div>儿子1</div>"
        }
        let son2s ={
            template:"<div>儿子2</div>"
        }
        let RouterObj = new VueRouter({

            routes: [{
                path: '/father',
                component: fathers,
                children:[
                    {path:'son1',component:son1s},
                    {path:'son2',component:son2s}
                ]
            }]
        })
        let vm = new Vue({
            el: '#box',
            router: RouterObj
        })
    </script>

路由终结案例，经典的网站页面

 * {
            margin: 0;
            padding: 0;
        }

        .top {
            width: 100%;
            height: 100px;
            background: pink;
        }
        .main{
            display: flex;/* 弹性盒子 */
            height: 300px;
        }
        .left{
           flex: 2;
            background: red;
        }
        .right{
            flex: 8;
            background: skyblue;
        }

 <div id="box">

        <router-view class="top"></router-view>
        <div class="main">
            <router-view name="left" class="left"></router-view>
            <router-view name='right' class="right"></router-view>
        </div>
    </div>
    <script>
        let tops = {
            template: '<div>top</div>'
        }
        let left = {
            template: '<div>left</div>'
        }
        let right = {
            template: '<div>right</div>'
        }

        let routerObj = new VueRouter({
            routes: [{
                path: '/',
                components: {
                     default: tops,//默认加载
                    left: left,    //前面是name 后面的组件名
                    right: right
                }
            }]
        })
        let vm = new Vue({
            el: '#box',
            router: routerObj

        })
    </script>

到这就结束了还有一个动画马上就开始讲
点击这里直接跳转到
**

vue动画的实现

**