Vue.js router配置

首先我们的结构是这样的

main.js 中 主要加入这句话

import router from './router/router.js'

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router/router.js'
import elementui from 'element-ui'
import museui from 'muse-ui'
import mintui from 'mint-ui'
import store from './vuex/vuex-store.js'

import 'element-ui/lib/theme-chalk/index.css';
import 'muse-ui/dist/muse-ui.css';
import 'mint-ui/lib/style.css'

Vue.config.productionTip = false
Vue.use(elementui)
Vue.use(museui)
Vue.use(mintui)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

router.js 中是这么写

引入一个登录的LOGIN 一个主页的

import Vue from 'vue'
import Router from 'vue-router'
import LOGIN from '@/components/login'
import MAIN from '@/components/home'
import HOME  from './routers/home.js'
Vue.use(Router)

export default new Router({
  routes: [{
      path: '/',
      redirect: '/main'
    },
    {
      path: '/login',
      name: 'LOGIN',
      component: LOGIN,
    },
    {
      path: '/main',
      name: 'MAIN',
      component: MAIN,
      children:[
        HOME,
      ]
    }
  ]
})

home.js中

import home from '../../components/modules/home/index.vue'
export default {
	path: '/home',
	name: 'home',
	redirect: '/home/home_list',
	component: home,
	children: [{
		path: '/home/home_list',
		name: 'home_list',
		component:resolve => require(['@/components/modules/home/modules/list.vue'], resolve),
		meta:{name:'首页',parent:''}
	},
	]
}

在login.vue中 点击登录的时候跳转到home.vue

<template>
  <div class="hello">
    <div>
      <el-form  label-width="80px" :model="form">
        <el-form-item label="用户名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" type="password"></el-input>
        </el-form-item>
      </el-form>
       <mu-button color="primary" @click="jumphome">登录</mu-button>
       <mt-button size="normal" @click="dain">取消</mt-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      form:{
        name:"",
        password:"",
      }
    };
  },
  watch:{

  },
  computed:{

  },
  methods:{
    jumphome(){
      this.$router.push({
        path: '/home/home_list',
        query: {
        },
      })
    },
    dain(){
      let param={
        username:this.form.name,
        password:this.form.password,
      }
      this.$store.dispatch("login/loginTest",param).then(res=>{

      })

    },

  },
  mounted(){

  },
  created(){

  },
};
</script>

<style scoped>
</style>

 home.vue

<template>
  <div class="hello">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      form:{
        name:"",
        password:"",
      }
    };
  },
  watch:{

  },
  computed:{

  },
  methods:{
  },
  mounted(){

  },
  created(){

  },
};
</script>

<style scoped>
</style>

这样就配置好了