vue学习之导航栏跳转路由

最近在做的东西需要实现导航栏跳转功能,点击导航菜单，切换到不同的页面。效果如下

开发工具：WebStorm，ElementUI，Vue

一、新建一个Vue项目

项目目录如下

二、安装ElementUI

npm i element-ui -S

在main.js中引入ElementUI，main.js代码如下

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

Vue.config.productionTip = false
Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
     
  el: '#app',
  router,
  components: {
      App },
  template: ''
})

三、新建component

其中HelloWorld.vue是项目创建时就存在的，需要新建三个vue文件，Dashboard.vue，Network.vue，Transcation.vue， 代码基本相同， 以Dashboard.vue为例，代码如下

<template>
    <div>
      DashBoard
    </div>
</template>

<script>
export default {
     
  name: 'Dashboard'
}
</script>

<style scoped>

</style>

四、修改index.js路由配置

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Network from '@/components/Network'
import Dashboard from '@/components/Dashboard'
import Transactions from '@/components/Transactions'

Vue.use(Router)

export default new Router({
     
  routes: [
    {
     
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
     
      path: '/network',
      name: 'network',
      component: Network
    },
    {
     
      path: '/dashboard',
      name: 'dashboard',
      component: Dashboard
    },
    {
     
      path: '/transactions',
      name: 'Transactions',
      component: Transactions
    }
  ]
})

五、修改App.vue

<template>
  <div id="app">
    <el-menu :default-active="$route.path" router class="el-menu-demo" mode="horizontal" @select="handleSelect" @close="handleClose">
      <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
        <template slot="title">
          <i class="el-icon-s-platform"></i>
          <span> {
     {
      item.navItem }}</span>
        </template>
      </el-menu-item>
    </el-menu>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
     
  name: 'App',
  data () {
     
    return {
     
      navList: [
        {
     name: '/', navItem: 'HelloWorld'},
        {
     name: '/dashboard', navItem: 'DASHBOARD'},
        {
     name: '/network', navItem: 'NETWORK'},
        {
     name: '/transactions', navItem: 'TRANSACTIONS'}
      ]
    }
  }
}
</script>
<style>
</style>

需要注意的点就是在不要忘记添加router属性，以及default-active属性的值为$route.path，有些文章是this.$route.path，貌似不能生效。