共计 1846 个字符,预计需要花费 5 分钟才能阅读完成。
最近刚刚用 vue 写了个公司项目,使用 vue-cli 构建的,算是中大型项目吧,然后这里想记录并且分享一下其中的知识点,希望对大家有帮助, 后期会逐渐分享;话不多说,直接上代码!!
main.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'
import './assets/css/common.css'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '',
components: {App}
})
router 文件夹里面的 index.js
import Vue from 'vue'
import Router from 'vue-router'
import home from '../components/home' // 这里可以选择 2 种写法,一种是写在这里,一种是写在 component 里面,看下方代码~
Vue.use(Router)
export default new Router({
mode:'history',
routes: [
{
path: '/',
component: home
},
{
path:'/pagevue',
component:pagevue => require(['../components/childCom/pagevue.vue'], pagevue),
},
{
path:'/nextpagevue',
component:nextpagevue => require(['../components/childCom/nextpagevue.vue'], nextpagevue),
}
]
})
home.vue
<template>
<div class="homeMain">
<div> 我是首页 </div>
<div class="routerName" @click="clickMe"> 点我进下一个路由 </div>
</div>
</template>
<script>
export default{data(){return{}
},
methods:{clickMe(){this.$router.push({path:'/pagevue'})
}
}
}
</script>
<style>
</style>
pagevue.vue
<template>
<div class="homeMain">
<div> 我是子页面 </div>
<div class="routerName" @click="returnhome"> 点我继续进下一个路由 </div>
</div>
</template>
<script type="text/javascript">
export default{
methods:{returnhome(){this.$router.push({path:'/nextpagevue'})
}
}
}
</script>
nextpagevue.vue
<template>
<div class="homeMain">
<div> 我是另外一个子页面 </div>
<div class="routerName" @click="clickGohome"> 点我回到首页 </div>
</div>
</template>
<script type="text/javascript">
export default{
methods:{clickGohome(){this.$router.push({path:'/'})
}
}
}
</script>
common.css
* {
margin: 0;
padding: 0; }
.homeMain {
text-align: center;
margin-top: 100px; }
.homeMain .routerName {
color: #1eb89c;
border: 1px solid #1eb89c;
margin-top: 20px; }
/*# sourceMappingURL=common.css.map */
正文完
星哥说事-微信公众号
![post-qrcode](https://www.xgss.net/wp-content/uploads/2023/07/二维码-微信公众号256x256.jpg)