首先我們的結構是這樣的
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>
這樣就配置好了