element ui 路由配置

目录

• • 创建router
  • 修改main.js
  • App.vue加入router-view标签
  • 其他

创建router

• router/index.js代码如下所示

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)

export default new Router({
  mode: 'history', // 如果不加这段代码，地址中间有#号
  routes: [
    {
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: HelloWorld
    } 
  ]
})

修改main.js

• main.js完整代码如下。

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

Vue.use(ElementUI);

new Vue({
  el: '#app', 
  router,
  render: h => h(App)
});

App.vue加入router-view标签

• App.vue完整代码如下所示。

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
     <router-view></router-view>
  </div>
</template>

<script>
 
export default {
  name: 'App',
  components: {
   
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

其他

• 需要安装依赖。

npm install --save vue-route --registry=https://registry.npm.taobao.org