Vue+Element-UI跳转页面看起来挺炫酷的，你觉得？

Vue.js真是神奇！这货是免费的网页建站工具，好学好用得很，三下五除二就能做出超炫酷的网站了。你知道吗？还有一个叫做Element-UI的东西，它其实是Vue.js的内嵌开发组件，用这些组件做出来的网页，真的太好看也太实用了。要是把这两个搭档在一起，用来做导航什么的，估计用户体验能提升不少！

搞定路由器导航不难？先装上Vue和Element-UI！还没装的话，那就去官网上找找教程哈～接着，我们可以开始动手！加载一个Vue实例，配几个路由，这个时候VueRouter就派上用场，记得提前安装好哦～然后，随心所欲地搭建首页（Home）和关于页面（About）等网页，想加多少路由都OK~

// main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(VueRouter)
Vue.use(ElementUI)
const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    // 更多路由...
  ]
})
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

赶紧添点儿颜色别忽视这个小地方！咱们已经弄过两次了，接下来就挂在路由器上，客人一眼就能看出来哪个是要选的。千万别忘啦～

好，我们可以用Element-UI的NavMenu组件来完成页面浏览这个东西主要就是把各种导航链接一次性展示出来。然后安排上相应的路由设置，鼠标一点击就会马上跳转到指定页啦真的是超容易~

// Home.vue

  

    
欢迎来到首页
  


export default {
  name: 'Home'
}

为啥要用Vue和Element-UI做router导航？原因其实就是它们特火，超厉害的那种！试试就知道效果有多赞了！这样做导航简直是给用户带来更好体验，也让咱们工作效率大大增加！

// About.vue

  

    
关于我们
  


export default {
  name: 'About'
}

“你用过Vue跟Element-UI？试下弄个路由驱动，挺好玩的!”

// main.js
import Home from './components/Home.vue'
import About from './components/About.vue'
const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    // 更多路由...
  ]
})

想知道怎么用Vue+ELEMENT UI做个炫酷的网站导航吗？ 虽然有点难，但是跟着我步骤来操作就成功了！别怕，大胆去试试！记得留言捧场，顺便晒给你的朋友们看！

// App.vue

  

    
      首页
      关于
      
    
    
  


export default {
  name: 'App',
  methods: {
    handleSelect(key) {
      this.$router.push({ name: key })
    }
  }
}