Vue路由简单介绍（二）

设置选中路由高亮

1. 点击查看元素可发现 < router-link >（默认渲染为a标签）带有默认的class属性值“router-link-active”，设置链接激活时使用的css类名。这样我们可以通过给出的类来设置被选中的路由的样式，以示区别。如果需要改变class默认值，可通过路由的构造选项 linkActiveClass 来全局配置。
   

var routerObj = new VueRouter({
    routes: [{
        path: '/',
        redirect: '/login'
    }, {
        path: '/login',
        component: login
    }, {
        path: '/register',
        component: register
    }],
    linkActiveClass: 'myactive'//改变router-link元素的class默认值
})

.myactive {
    background-color: aquamarine;
    font-size: 2rem;
}/*设置被选中的router-link元素的样式*/

为路由切换添加动画

.v-enter,
.v-leave-to {
    opacity: 0;
    transform: translateX(150px);
}

.v-enter-active,
.v-leave-active {
    transition: all .5s ease;
}

<transition mode="out-in">
    <router-view></router-view>
</transition>

路由传参的两种方式

1. 使用query方式传递参数

• 直接给router-link的to属性传递参数

<!--如果在路由中使用查询字符串给路由传递参数，则不需要修改路由规则的path属性-->
<router-link to="/login?id=10&name=z3">登录</router-link>

• 通过this.$route可查看到对应的参数
  
• 在对应组件的模板对象中的钩子函数created中获取参数

var login = {
    template: '<h1>登录组件---{{$route.query.id}}---{{$route.query.name}}</h1>',
    created() { //组件的生命周期钩子函数
        //console.log(this.$route)
        console.log(this.$route.query.id)
    }
}

2. 使用params方式传递参数

• 通过设置path来确定需要得到的参数

var router = new VueRouter({
    route: [{
        path: '/register/:id/:name', //冒号表示动态的数据，通过URL具体地址来得到id的数据
        component: register
    }]
})

• 给router-link的to属性传递参数值

<router-link to="/register/12/l4">注册</router-link>

• 通过this.$route可查看到对应的参数
  

• 在对应组件的模板对象中的钩子函数created中获取参数

var register = {
    template: '<h1>注册组件---{{$route.params.id}}---{{$route.params.name}}</h1>',
    created() {
        //console.log(this.$route)
        console.log(this.$route.params.id)
    }
}

使用children属性实现路由嵌套

<div id="app">
    <router-link to="/account">Account</router-link>
    <router-view></router-view>
</div>
<template id="tmpl">
    <div>
        <h1>这是Account组件</h1>
        <router-link to="/account/login">登录</router-link>
        <router-link to="/account/register">注册</router-link>
        <router-view></router-view>
       <!--链接后的router-view元素不能省略，否则没有内容显示-->
    </div>
</template>
<script>
    //组件模板对象
    var account = {
        template: '#tmpl'
    }

    var login = {
        template: '<h1>登录组件</h1>',

    }

    var register = {
        template: '<h1>注册组件</h1>',

    }

    var router = new VueRouter({
        routes: [{
                path: '/account',
                component: account,
                //使用children属性实现子路由，同时，子路由的path前面，不要带'/'否则永远以根路径开始请求
                children: [{
                    path: '/login',
                    component: login
                }, {
                    path: 'register',
                    component: register

                }]
            }
        ]
    })

    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        //router: router
        router
    })
</script>

过程逻辑：刚开始时是根路径’/’，但根路径并未在路由中定义，所以不展示任何组件，点击上面的链接，路径变为’/accont’，路由匹配到路径，显示相应的account组件，再通过“登录”和“注册”的链接分别显示对应组件内容。

使用命名视图实现经典布局

之前的路由规则实现的都是通过路径改变来切换页面，不能实现在一个页面显示多个组件，下面通过路由规则来在一个页面显示多个组件，进行更改样式来实现自己想要的页面布局。

<div id="app">
    <router-view></router-view>
    <router-view name="left"></router-view>
    <router-view name="main"></router-view>
</div>
<script>
    var header = {
        template: '<h1>header头部区域</h1>'
    }

    var leftBox = {
        template: '<h1>leftBox侧边栏区域</h1>'
    }
    var mainBox = {
        template: '<h1>mainBox主体区域</h1>'
    }

    var router = new VueRouter({
        routes: [{
                path: '/',
                components: {
                    "default": header, 
                    //如果没有给router-view设置name属性，则默认显示default对应的属性值
                    "left": leftBox,
                    "main": mainBox
                }
            }
        ]
    })
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router
    })
</script>