vue2-路由

安装路由插件

npm i vue-router@3

插件需要use一下，main.js

import Vue from 'vue'
import App from './App.vue'
// 引入路由
import Router from 'vue-router'
// 引入路由器
import router from './router'
// 引入ui
// import {Button,Upload, Image,Avatar} from 'element-ui'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
// 应用路由
Vue.use(Router)

//注册ui组件
// Vue.component('el-button',Button)
// Vue.component('el-upload',Upload)
// Vue.component('el-image',Image)
// Vue.component('el-avatar',Avatar)
Vue.use(ElementUI);


new Vue({
  render: h => h(App),
  router:router
}).$mount('#app')

在src/下面新建router/index.js

// 该文件专门用于创建整个应用的路由器
import Router from 'vue-router'
// 引入组件
import Task from '../components/Task'
import UpdateCase from '../components/UpdateCase'
import Readme from '../components/Readme'
import NodeManage from '../components/NodeManage'

export default  new Router({
    routes:[
        {
            path:'/',
            component:Readme
        },
        {
            path:'/task',
            component:Task
        },
        {
            path:'/updatecase',
            component:UpdateCase
        },
        {
            path:'/nodemanage',
            component:NodeManage
        }
    ]
})

点击元素跳转对应的组件：需要一个特殊标签 router-link  代替a标签

<template>
  <div id="meau">
      <ul id="meau_ul">
          <li v-for="(x,index) in items" :key='index'> <img :src="x.addsrc" alt="" style="width: 20px;height: 20px;"> &nbsp;
          <!-- <a :href="x.url">{{x.name}}</a> -->
          <router-link :to="x.path" active-class="active">{{x.name}}</router-link>
          </li><br>
      </ul>
      
  </div>

</template>

<script>
export default {
    name:"NavigationBar",
    data(){
      return {
        items:[
          {name:'测试任务',addsrc:require('../assets/task.png'),path:'/task'},
          {name:'机器管理',addsrc:require('../assets/机器人.png'),path:'/nodemanage'},
          {name:'更新用例',addsrc:require('../assets/测试用例集.png'),path:'/updatecase'},
          {name:'权限管理',addsrc:require('../assets/权限.png'),path:'/'},
          {name:'临发布库',addsrc:require('../assets/数据库.png'),path:'/'}]
        }

      }
}
</script>

最后一步就是在哪里展示了：App.vue

 

 

<template>
    <div>
        <WelCome/>
        <NavigationBar/>
        <!-- 此处展示什么组件，取决于点击的导航栏 -->
        <router-view></router-view>

        
    </div>
</template>  

<script>
    import NavigationBar from './components/NavigationBar'
    import WelCome from './components/WelCome'
    import UpdateCase from './components/UpdateCase'
    
    export default {
        name:'App',
        components:{
            NavigationBar,
            WelCome,
            UpdateCase,

        }
    }
</script>

<style>

</style>