vue-router的简单使用（简单）

下载

npm install vue-router --save

目录组织：

src
    |__components
                |__callSource.vue
                |__cancld.vue
                |__Config
    |__js
        |__router.js
    |__index.html
    |__main.js

文件组织：

index.html

<div id="test">
    <Config></Config>
</div>

Config.vue

<el-container>
    <el-aside>
        <ul class="sidebar-menu">
            <li class="treeNav" v-for="(item,index) in configNav">
                <a href="javascript:void(0)" @click="showToggle(index)">{{item.name}}</a>
                <ul :class="{'active' :index===isShow}">
                    <li v-for = "nav in item.subItems">
                        主要是这里
                        <router-link :to="nav.link">
                        {{nav.text}}</router-link>
                    </li>
                </ul>
            </li>                
        </ul>
    </el-aside>
    <el-container>
        <el-main>
            和这里
            <router-view></router-view> 
        </el-main>
        <el-footer>

        </el-footer>
    </el-container>
</el-container>
<script>
    export default {
        data () {
            return {
                isShow:0,
                configNav:[
                    { 
                        name:'交换&路由',
                        subItems:[
                            { link:'/callSource',text: '呼叫源' },
                            { link:'/cancld',text: '号码分析' },
                            { link:'/route',text: '出局路由' }
                        ]
                    },
                    { 
                        name:'组织&资源',
                        subItems:[
                            { link:'/org',text: '组织' },
                            { link:'/term',text: '终端' },
                        ]
                    }                   
                ]            
            }
        },
        methods:{
            switchLink:function(index){
                this.isActive = index;
            },
            showToggle:function(index){  
                this.isShow = index;  
            }
        }
    }
</script>

callSource.vue

<template>
    <div>
        <h1>呼叫源</h1>
        <p>{{msg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "我是呼叫源 组件"
            }
        }
    }
</script>

cancld.vue

<template>
    <div>
        <h1>号码分析</h1>
        <p>{{aboutMsg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                aboutMsg: '我是号码分析组件'
            }
        }
    }
</script>

js/router.js

import Vue from 'vue'
import Router from 'vue-router'

import callSource from '../components/callSource.vue'

import cancld from "../components/cancld.vue"

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/callSource',
            name: 'callSource',
            component: callSource
        },
        {
            path: '/cancld',
            name: 'cancld',
            component: cancld
        }
    ]
})

main.js

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import Config from "./components/Config.vue";

import router from './js/route.js'
import './main.css';

Vue.use(ElementUI);

new Vue({
    el: "#test",
    router,//挂载
    template: '<Config/>',
    components: { Config }
})

效果