下载
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
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 }
})
效果