Vue05路由

路由的基本使用

1.导入vue-router的包

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

2.创建模板对象

var login = {
        template : '<h1>登录-----{{$route.query.id}}</h1>'
    }
    var register = {
        template: '<h1>注册-----{{$route.params.name}}</h1>'
    }

3.创建路由对象，配置路由规则，配置路由可以使用重定向，可以创建a标签，指向配置的路由规则，也可以使用router-link。

<router-link to="/login?id=10" tag="span">登录</router-link>
<router-link to="/register/zhangsan">注册</router-link>


var vueRouter = new VueRouter({//创建路由对象
        routes:[//路由规则:第一个属性path:监听的路由的地址，第二个component:模板对象
            {path:'/',redirect:'/login'},//重定向到某个URL的地址
            {path:'/login',component:login},
            {path:'/register/:name',component:register}
        ],
        linkActiveClass: 'myactive'//更改被点击时默认选择的CSS的class属性
    });

4.把路由对象注册到Vue实例中

var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router: vueRouter,//把路由规则对象注册到vm实例中，展示对应的组件
        component:{}
    })

5.把router-view标签放入到模板容器中

路由相关的知识：

1.点击高亮：点击router-link的高亮可以通过.router-link-active的css属性设置，也可以通过创建路由对象时，把linkActiveClass的默认属性改成自己的样式linkActiveClass: ‘myactive’，通过设置自己的样式来改变点击时的高亮
2.通过路由传值

1. 通过query:可以在router-link中地址加入?id=10&name=zs这种方式传值，使用this.$route.query.id(.name)来获取
2. 通过params:在定义路由规则的时候在路径后加入/:id/:name，这时候在router-link中的路径就必须加入/id/name这种方式来匹配路由，然后通过this.$route.params.id(name)来获取

3.布局相关：通过路由布局的时候，导航栏和侧边栏和主体部分，需要在模板容易中放入三个router-view中分别放入三个不同的路由，在配置路由规则时：

var vueRouter = new VueRouter({
        routes: [
            { path:'/',components: {
                'top': toptemp,
                'left': lefttemp,
                'main': main,
                }},
            // { path:'/left',component: lefttemp},
            // { path:'/main',component: main}
        ]
    });

在’/'的路径下配置路由的时候，components:下配置多个组件，并给每个组件对象取名字，在每个router-view的name属性放入要放入组件的名字，即：

<router-view name="top"></router-view>
    <div class="container">
        <!--    命名视图-->
        <router-view name="left"></router-view>
        <router-view name="main"></router-view>
    </div>

路由嵌套

在一个路由中嵌套其他路由，在创建路由对象，在配置这个路由规则的时候加入一个children[ {},{}]，在children中配置子路由，注意：在这个路由引用的模板中要加入router-view来装载的子路由

<div id="app">
    <router-view></router-view>
</div>
<template id="main">
    <div>
        <h1>这是一个组件</h1>
        <router-link to="/main/login">登录</router-link>
        <router-link to="/main/register">注册</router-link>
        <router-view></router-view>
    </div>
</template>
<script>
 var tem = {
        template: '#main'
    }
    var login = {
        template: '<h3>登录组件</h3>'
    }
    var register = {
        template: '<h3>注册组件</h3>'
    }
    var vueRouter = new VueRouter({
        routes: [
            {path:'/',redirect:'/main'},
            {
                path:'/main',
                component:tem,
                children:[//子路由，path前面不带斜线/，假如带了/就会直接匹配以/后面的地址，不会去匹配/main
                    {path: 'login',component: login},
                    {path: 'register',component: register}
                ]}
                ]
    });
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router:vueRouter
    })