Vue——嵌套路由

路由

有关路由的详细信息可以去vue的官网去查看，我这里只是自己实例的一个理解和总结。

单页面程序离不开路由的分配，自始至终只有一个页面存活，因此有关路由跳转的逻辑要合理配置

vue-Router

选择官方使用的vue-router库，因此要先准备环境

• 安装

$ npm install vue-router

安装之后就要配置路由，但是为了方便维护路由节点，可以创建单独的文件存放路由配置，因此创建router文件夹，添加index.js

• index.js

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

Vue.use(VueRouter)

export default new VueRouter({
	routes: []
})

然后在根入口文件中导入router，并配置到vue实例中。

• main.js

import router from './router'

 new Vue({
    el: '#app',
    components: {App},
    template: '<App/>',
    router
})

这样就能在各个模块中使用路由了。

实例

在src目录下创建views目录，分别创建about、home、news、message、detail的vue页面。

• 路由映射文件——index.js

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

import About from '../views/About.vue'
import Home from '../views/Home.vue'
import News from '../views/News.vue'
import Message from '../views/Message'
import Detail from '../views/detail.vue'

Vue.use(VueRouter)

export default new VueRouter({
    routes: [
        {path: '/', redirect: '/about'},
        {path: '/about', component: About},
        {
            path: '/home',
            component: Home,
            children: [
                {path: 'news', component: News},
                {
                    path: 'message',
                    component: Message,
                    children: [
                    {path: 'detail/:id', component: Detail}
                    ]
                },
                {path: '', redirect: 'news'}

            ]
        }
    ]
})

路由映射配置好之后就要开始使用了

使用 router-link 组件来导航。 通过传入 to 属性指定链接。 默认会被渲染成一个 <a> 标签

• App.vue

<template>
    <div>
        <div class="row">
            <div class="col-xs-offset-2 col-xs-8">
                <div class="page-header">
                    <h2>Router basic-2</h2>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-2 col-xs-offset-2">
                <div class="list-group">
                <router-link to="/about" class="list-group-item">About</router-link>
                <router-link to="/home" class="list-group-item">Home</router-link>
                    <!-- <a href="#/about" class="list-grou-item router-link-exact-active activeClass">About</a>
                    <a href="#/home" class="list-group-item">Home</a> -->
                </div>
            </div>
            <div class="col-xs-6">
                <div class="panel">
                    <div class="panel-body">
                        <keep-alive>
                        <router-view></router-view>
                        </keep-alive>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

样式是使用的bootstrap的cdn，将其以link的形式引用到index.html中。
APP中是分成了两个块，头部用来显示信息，下边则是组件的部分，其中左侧添加了路由导航，右侧将路由匹配到的组件渲染出来。

页面

接着就要实现页面的信息了，当点击左侧的home导航，右侧就会将home的组件渲染到右侧。

• home.vue

<template>
<div>
    <ul class="nav nav-tabs">
        <li>
            <router-link to="/home/news" >news</router-link>
        </li>
        <li>
            <router-link to="/home/message" >Message</router-link>
        </li>
    </ul>
    <div>
    <router-view></router-view>
    </div>
</div>
</template>

此处可以看到在home页面中也有路由的嵌套，当点击home中的message导航时，就会将message组件的内容渲染出来

• message.vue

<template>
<div>
    <ul>
        <li v-for="message in messages" :key="message.id">
            <router-link :to="`/home/message/detail/${message.id}`">{{message.title}}</router-link>
        </li>
    </ul>
    <router-view></router-view>
</div>
</template>

<script>
export default {
    data () {
        return {
            messages: []
        }
    },
    mounted () {
        setTimeout(() => {
            const temp = [
                { id: 1, title: 'message' },
                { id: 2, title: 'message' },
                { id: 3, title: 'message' },
                { id: 4, title: 'message' }
            ]
            this.messages = temp
        }, 500)
    }
}
</script>

当点击message时就会将vue实例中的messages赋值，然后绑定到页面中。
其中当点击循环出来的title时还会再次触发路由，此时将该条数据的ID传给detail，然后把detail组件放在下边渲染出来。

当detail组件初始化的时候就应该去获取路由参数，然后根据参数中的值去请求后台拿到相应的数据，然后在实现绑定渲染的效果。但这个实例中没有与后台交互，因此在初始化拿到数据后就自动创建一个模拟数据（忘了用插件了）。

• detail.vue

<template>
<div>
    <ul>
        <li>id: {{$route.params.id}}</li>
        <li>title: {{detail.title}}</li>
        <li>content: {{detail.content}}</li>
    </ul>
</div>
</template>

<script>
export default {
    data () {
        return {
            detail: {}
        }
    },
    methods: {
        getDetail (id) {
             this.detail = {id: id, title: 'message' + id, content: 'message content'}
        }
    },
    mounted () {
        const id = this.$route.params.id
        this.getDetail(id)
    },
    watch: {
        $route: function () {
        this.getDetail(this.$route.params.id)
        }
    }
}
</script>

这里添加了一个监视器，用来监听路由上的ID值，每当有变化就改变data中的数据，重新获取当前值。

router-view

另外一种方式就是通过标签传值，当message组件被渲染时代表其通过router-view标签，此时可以在标签上添加参数来传值，而被渲染的组件内部只需要通过props来获取即可。

	// father
    <router-view msg="abc"></router-view>
	// son
	  props: {
        msg: String
    },

总结

vue-router作为vue的官方库应该是很强的，只不过目前接触的比较少，只能稍微明白怎么用。目前明白的就是有一个路由导航，当触发路由后将导航匹配到的组件通过路由标签渲染出来。有关路由取值目前还没总结，这也是一个比较重要的知识。这次的传值是通过路由 ：id 直接配置的，相当于一个占位符，要想进入该页面，在触发时就要把id传进去。