简单的vue+elementUI+路由嵌套

elementUI是饿了么前端团队推出的一款基于vue.js2.0的桌面端UI框架

不多说了，先建立一个hello-vue的工程：

vue init webpack hello-vue

然后进入文件：

cd hello-vue

安装vue-router:

npm install vue-router --save-dev

安装element-ui:

npm i element-ui -S

安装依赖：

npm install

安装sass加载器：

cnpm install sass-loader node-sass --save-dev

启动测试：

npm run dev

用idea打开工程,

这些文件先建好：

先编写main.js的文件吧，路由和element所需要的导入内容如下：

import Vue from 'vue'

import App from './App'

import router from './router'

import 'element-ui/lib/theme-chalk/index.css';

import ElementUI from 'element-ui';

Vue.use(router);

Vue.use(ElementUI);

new Vue({

el: '#app',

router,

render: h => h(App),

components: { App },

template: ''

})

加粗下划线是所要加的内容。

App.vue中的 <template>中加上<router-view></router-view> 来显示

路由里面设置：

import Vue from 'vue'
import VueRouter from 'vue-router'

import Login from '../view/Login'
import Main from '../view/Main'

Vue.use(VueRouter);

export default new VueRouter({
routes:[{
path:'/login',
component:Login

},
{
path:'/main',
component: Main
}
]
})

这样就连接起来了。

login.vue里我设置的代码：

<template>
  <div>
    <!--flex弹性盒子模型，justify-content：主抽 -->
    <div style="display: flex;justify-content: center;margin-top: 150px">
      <el-card style="width: 400px">
        <div slot="header" class="clearfix">
          <span>登录</span>
        </div>
        <table>
          <tr>
            <td>用户名</td>
            <td>
              <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
            </td>
          </tr>
          <tr>
            <td>密码</td>
            <td>
              <el-input type="password" v-model="user.password" placeholder="请输入密码" @keydown.enter.native="doLogin"></el-input>
              <!-- @keydown.enter.native="doLogin"当按下enter键的时候也会执行doLogin方法-->
            </td>
          </tr>
          <tr>
            <!-- 占两行-->
            <td colspan="2">
              <!-- 点击事件的两种不同的写法v-on:click和 @click-->
              <!--<el-button style="width: 300px" type="primary" v-on:click="doLogin">登录</el-button>-->
              <el-button style="width: 300px" type="primary" @click="doLogin">登录</el-button>
            </td>
          </tr>
        </table>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  name: "Login",
  //单页面中不支持前面的data:{}方式
  data() {
    //相当于以前的function data(){},这是es5之前的写法，新版本可以省略掉function
    return{
      //之前是在里面直接写username，password等等，但是这里要写return
      //因为一个组件不管要不要被其他组件用，只要这样定义了，它就会认为可能这个组件会在其他的组件中使用
      //比如说在这里定义了一个变量，然后把这个组件引入到A组件中，A组件中修改了这个变量
      //同时这个组件也在B组件中引用了，这时候A里面一修改，B里面也变了，它们用的是一个值
      //可是一般来说可能希望在不同的组件中引用的时候，使用不同的值，所以这里要用return
      //这样在A组件和B组件分别引用这个变量的时候是不会互相影响的
      user:{
        username:'huangshao',
        password:'123',
        //为了登录方便，可以直接在这里写好用户名和密码的值
      }
    }
  },
  methods:{
    doLogin(){//一点击登录按钮，这个方法就会执行
      //alert(JSON.stringify(this.user))//可以直接把this.user对象传给后端进行校验用户名和密码
      this.$router.push("/main");
    }
  }
}
</script>

这个可以跳转到Main.vue页面

这是简单的vue-route——elementUI的设置

接下来是路由嵌套：

先给Main.vue加点样式：

<template>
    <div>
      <el-row class="tac">
        <el-col :span="12">
          <h5>默认颜色</h5>
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>导航一</span>
              </template>
              <el-menu-item-group>
                <template slot="title">分组一</template>
                <el-menu-item index="1-1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="分组2">
                <el-menu-item index="1-3">选项3</el-menu-item>
              </el-menu-item-group>
              <el-submenu index="1-4">
                <template slot="title">选项4</template>
                <el-menu-item index="1-4-1">选项1</el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">导航二</span>
            </el-menu-item>
            <el-menu-item index="3" disabled>
              <i class="el-icon-document"></i>
              <span slot="title">导航三</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">导航四</span>
            </el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="12">
          <h5>自定义颜色</h5>
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>导航一</span>
              </template>
              <el-menu-item-group>
                <template slot="title">分组一</template>
                <el-menu-item index="1-1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="分组2">
                <el-menu-item index="1-3">选项3</el-menu-item>
              </el-menu-item-group>
              <el-submenu index="1-4">
                <template slot="title">选项4</template>
                <el-menu-item index="1-4-1">选项1</el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">导航二</span>
            </el-menu-item>
            <el-menu-item index="3" disabled>
              <i class="el-icon-document"></i>
              <span slot="title">导航三</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">导航四</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
    </div>
</template>

<script>
export default {
  name: "Main",
  methods: {
   handleOpen(key, keyPath) {
     console.log(key, keyPath);
   },
   handleClose(key, keyPath) {
     console.log(key, keyPath);
   }
 }
}
</script>

<style scoped>

</style>

然后user包下创建两个组件，名为：List 和 Profile

重要的是路由里面：

import List from '../view/user/List'
import Profile from '../view/user/Profile'

这是上面的导入。

{
  path:'/main',
  component: Main,
  children:[
    {
      path:'./user/list',
      component:List
    },
    {
      path:'./user/profile',
      component: Profile
    }
  ]
}

这是嵌套要用的方法。

这样后面就可以调用了，用router-link调用。