element ui 路由配置

心已赠人 2022-12-28 14:09 10阅读 0赞

### 目录 ###

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

## 创建router ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzE5NDczNTI5_size_16_color_FFFFFF_t_70]

*  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 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzE5NDczNTI5_size_16_color_FFFFFF_t_70 1]

*  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标签 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzE5NDczNTI5_size_16_color_FFFFFF_t_70 2]

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

<template>
      <div id="app">
        
         <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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzE5NDczNTI5_size_16_color_FFFFFF_t_70]: /images/20221120/31d62f9374ca4131b74cb4a07d77d92b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzE5NDczNTI5_size_16_color_FFFFFF_t_70 1]: /images/20221120/8456840ba9f64c93973ae1fa00531e0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzE5NDczNTI5_size_16_color_FFFFFF_t_70 2]: /images/20221120/1e8c3991fad742509b0e4db7fd3e8ea1.png