Vue+Router+Element实现简易导航栏

本项目为大家分享了Vue+Router+Element实现简易导航栏的具体代码，供大家参考，具体内容如下

项目结构：

直接上代码：主要就是引入配置路由Router

 ①：引入Router（路由管理器）

//config.js 页面
 
//导航栏
import Home from '../components/home'
//首页
import Index from '../components/index'
//视频平台
import Vid from '../components/vid_terrace'
//其他页面
import Rests from '../components/rests'
 
 
export default {
  routes:[
    {
      path:'/home',
      name: 'home',
      component: Home,
    },
    {
      /**
       *  home 配置的就是导航栏，这个必须配置不然就会跳转到新的页面
       *  /home/index
       */
 
      path: '/home',
      name: 'home',
      component: Home,
      redirect: 'index',
      children:  [
        {
          name: 'index',
          path: '/index',
          component: Index
        },
        {
          name: 'vid',
          path: '/vid',
          component: Vid
        },
        {
          name:'rests',
          path: '/rests',
          component: Rests
        }
      ]
    }
  ],
  // 去掉Vue地址的#
  mode:'history'
}

//index.js 页面

import VueRouter from "vue-router";
import Vue from "vue";
import Config from './config';
 
Vue.use(VueRouter);
 
let router = new VueRouter(Config);
export default router;

//main.js 页面

import Vue from 'vue';
import App from './App';
 
 
// 引入Element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
 
//引入./router/index文件
import router from "./router/index";
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
 
  el: '#app',
  render: h => h(App),
  router
})

//app.vue 页面

//home.vue 页面

效果图：

乍一看可能有点繁琐，因为Router的配置有点乱，其实导航栏的代码没几行，如果你的环境已经搭好那就只需要看下home.vue和config.js文件就好。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。