珠海柏泰教育官方网站建设,苏州企业网站建设开发与制作,做一份完整的网站规划书,wordpress文章里面的菜单怎么添加最近刚刚用vue写了个公司项目#xff0c;使用vue-cli构建的#xff0c;算是中大型项目吧#xff0c;然后这里想记录并且分享一下其中的知识点#xff0c;希望对大家有帮助,后期会逐渐分享#xff1b;话不多说#xff0c;直接上代码#xff01;#xff01; app.vue 1 使用vue-cli构建的算是中大型项目吧然后这里想记录并且分享一下其中的知识点希望对大家有帮助,后期会逐渐分享话不多说直接上代码 app.vue 1 template2 div idapp3 router-view/router-view4 /div5 /template6 7 script8 export default {9 name: app
10 }
11 /script
12
13 style
14
15 /style main.js 1 // The Vue build version to load with the import command2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.3 import Vue from vue4 import App from ./App5 import router from ./router6 import ./assets/css/common.css7 8 Vue.config.productionTip false9
10 /* eslint-disable no-new */
11 new Vue({
12 el: #app,
13 router,
14 template: App/,
15 components: { App }
16 }) router文件夹里面的index.js 1 import Vue from vue2 import Router from vue-router3 import home from ../components/home //这里可以选择2种写法一种是写在这里一种是写在component里面看下方代码~4 5 Vue.use(Router)6 7 export default new Router({8 mode:history,9 routes: [
10 {
11 path: /,
12 component: home
13 },
14 {
15 path:/pagevue,
16 component:pagevue require([../components/childCom/pagevue.vue], pagevue),
17 },
18 {
19 path:/nextpagevue,
20 component:nextpagevue require([../components/childCom/nextpagevue.vue], nextpagevue),
21 }
22 ]
23 }) home.vue 1 template2 div classhomeMain3 div我是首页/div4 div classrouterName clickclickMe点我进下一个路由/div5 /div6 /template7 script8 export default{9 data(){
10 return{
11
12 }
13 },
14 methods:{
15 clickMe(){
16 this.$router.push({path:/pagevue})
17 }
18 }
19 }
20 /script
21 style
22 /style pagevue.vue 1 template2 div classhomeMain3 div我是子页面/div4 div classrouterName clickreturnhome点我继续进下一个路由/div5 /div6 /template7 script typetext/javascript8 export default{9 methods:{
10 returnhome(){
11 this.$router.push({path:/nextpagevue})
12 }
13 }
14 }
15 /script nextpagevue.vue 1 template2 div classhomeMain3 div我是另外一个子页面/div4 div classrouterName clickclickGohome点我回到首页/div5 /div6 /template7 script typetext/javascript8 export default{9 methods:{
10 clickGohome(){
11 this.$router.push({path:/})
12 }
13 }
14 }
15 /script common.css 1 * {2 margin: 0;3 padding: 0; }4 .homeMain {5 text-align: center;6 margin-top: 100px; }7 .homeMain .routerName {8 color: #1eb89c;9 border: 1px solid #1eb89c;
10 margin-top: 20px; }
11
12 /*# sourceMappingURLcommon.css.map */ 转载于:https://www.cnblogs.com/silent007/p/8109822.html
