vue中的路由router详解

路由（router）

1. 后端路由：所有的超链接都是URL地址，所有的URL地址都定义服务器上对应的资源
2. 前端路由：对于单页面应用程序来说，通过URL中的hash值（#号）来实现不同页面之前的切换

hash有一个特点：http请求中不会包含hash相关的内容，所以，单页面应用程序中的页面跳转主要是用hash实现

路由的基本使用

1. 引入文件（vue.js和vue-router.js）
2. 创建路由对象，路由对象中有routes（配置对象），配置对象中有两个属性path（监听路由的链接地址）和component（对应的组件对象）
3. 挂载到Vue实例中
4. 使用<router-view>标签展示
5. 使用<router-link to="跳转的地址">标签用于超链接的跳转
6. 默认渲染为<a>标签，通过tag属性可以改变标签，依然保持点击跳转事件
7. 在router-link标签中添加 replace 属性 则 无历史回退记录

<div class="app">
    <!--vue-router提供了<router-link to='/跳转的地址'>标签用于超链接的跳转，可以省略#号,
    默认渲染为<a>标签，通过tag属性可以改变标签，依然保持点击跳转事件-->
    <router-link to="/login" tag="span" >登录</router-link>
    <router-link to="/register">注册</router-link>

    <!--4.使用：通过Vue-router提供的router-view标签-->
        <router-view></router-view>

</div>
<script src="../lib/vue-2.4.0.js"></script>
<!--1. 引入Vue-router文件-->
<script src="../lib/vue-router-3.0.1.js"></script>
<script>

    //组件对象
    var login = {
        template: '<h1>登录页面</h1>'
    }
    var register = {
        template: '<h1>注册页面</h1>'
    }

    /* 2. 创建路由对象，路由对象中有一个routes（配置对象）属性是一个数组，
     配置对象中有两个属性path（监听路由链接地址）和component（对应的组件对象）*/
    var routerObj = new VueRouter({
        routes: [
            {path: '/', redirect: '/login'},    /*重定向*/
            {path: '/login', component: login},
            {path: '/register', component: register}
        ]
    });

    var vm = new Vue({
        el: '.app',
        data: {},
        methods: {},
        /*3. 挂载到Vue实例中的router属性*/
        router: routerObj
    })
</script>

---

选中 高亮显示

方式①：通过<router-link>所提供的类=>router-link-active设置样式

方式②：改变<router-link>所提供的类=>创建路由对象中，加入一个属性（linkActiveClass）, linkActiveClass:'myactive' ,此时，对myactive类设置样式

---

路由传参

方式①：query 如果在路由中，使用查询字符串，给路由传递参数，则不需要修改路由规则的path属性

<router-link to="/login?id=11&name=zs"></router-link>

(this.$route.query): 通过this.$route.query.id拿到对应的id的值，通过this.$route.query.name拿到对应的name的值

 

 

方式②：params  

1. 改变路由规则path的属性{path:/login/:id/:name等以此类推,component:login}
2. <router-link to='/login/12/zs等以此类推'></router-link>
3. (this.$route.params)  : 通过this.$route.params.id获取对应的id的值。。。。

<div class="app">
    <!--通过改变路由规则的path属性 和 对应的router-link to= ''的值实现传参-->
    <router-link to="/login/10/lang">登录</router-link>
    <router-link to="/register">注册</router-link>
    <router-view></router-view>
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script src="../lib/vue-router-3.0.1.js"></script>
<script>

    /*组件对象*/
    var login = {
        template:'<h1>登录界面----{{ $route.params.id }}-------{{ $route.params.name }}</h1>',
        created(){
            /*通过this.$route.params获取地址栏中的参数*/
            console.log(this.$route.params)
        }
    }
    var register = {
        template:'<h1>注册界面</h1>'
    }

    /*创建路由对象*/
    var router = new VueRouter({
        routes:[
            {path:'/login/:id/:name',component:login},
            {path:'/register',component:register}
        ]
    })

  var vm = new Vue({
        el:'.app',
        data:{},
      /*挂载到Vue实例中（属性和值相同可直接写router）*/
      router
    })
</script>

---

路由的嵌套（子路由）

路由规则中新增一个children属性，是一个数组，再次存放path和component

注意：children中的path的值不能带‘ / ’,

<div id="app">
    <router-link to="/account">Account</router-link>
    <router-view></router-view>
</div>

<template id="tmpl">
    <div>
        <h1>这是 Account 组件</h1>
<!--Account的子组件--->
        <router-link to="/account/login">登录</router-link>
        <router-link to="/account/register">注册</router-link>
        <router-view></router-view>
    </div>
</template>

<script>

    // 组件的模板对象
    var account = {
        template: '#tmpl'
    }

    var login = {
        template: '<h3>登录</h3>'
    }

    var register = {
        template: '<h3>注册</h3>'
    }

    var router = new VueRouter({
        routes: [
            {
                path: '/account',
                component: account,
                // 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址
                children: [
                    {path: 'login', component: login},
                    {path: 'register', component: register}
                ]
            }
        ]
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router
    });
</script>

---

命名视图实现布局方式

通过路由规则的components属性，是一个对象，值可以有多个组件对象

注意：是components，带个s，是一个对象

{ path:"/" , components:{

    default：组件对象,       //默认的展示组件

    name的值：组件对象,

..........

}

通过name属性指定对应的组件对象

<router-view name=" "></router-view>

    <style>
        *{
            padding:0;
            margin:0;
        }
        /*设置组件中的样式*/
        .header {
            background-color: orange;
            height: 100px;
        }
        .container {
            display: flex;
            height:700px;
        }
        .left{
            flex: 2;
            background-color: red;
        }
        .main{
            background-color: green;
            flex:8;
        }
    </style>
<div class="app">
    <!--通过name指定components中对应的组件-->
    <router-view></router-view>
    <div class="container">
        <router-view name="left"></router-view>
        <router-view name="main"></router-view>
    </div>

</div>
<script>

    /*创建组件对象*/
    var header = {
        template: '<h1 class="header">头部</h1>'
    }
    var leftBox = {
        template: '<h1 class="left">左侧导航栏</h1>'
    }
    var mainBox = {
        template: '<h1 class="main">主体内容</h1>'
    }

    var router = new VueRouter({
        routes: [
            /*使用components是一个对象，定义多个展示router-view视图,通过属性名称给router-view标签元素指定name*/
            {
                path: '/', components: {
                default: header,
                left: leftBox,
                main: mainBox
            }
            }
        ]
    })

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

---

keep-alive:保存组件状态，失活的组件将会被缓存

当一个页面离开，再回到这个页面时，默认是不会保存之前页面的状态的

如果要保存这个数据 可使用<keep-alive>标签包裹住<router-view>标签

可见，当使用keep-alive标签时，已经对组件状态有所缓存，离开关于界面再次进入关于界面依然是展示西游的信息。而不是三国

当且仅当使用keep-alive时会触发两个生命周期函数 activated（keep-alive被激活） 和 deactivated（keep-alive被停用）

 

keep-alive的属性：

1. include - 字符串或正则表达式。只有名称匹配的组件会被缓存
2. exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
3. max - 数字。最多可以缓存多少组件实例。

include 和 exclude :属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。

max:最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

示例代码：

app.vue

home.vue

 

about.vue

 

user.vue

示例效果：

可见，home主页没有被缓存下来

---