Skip to content

Commit

Permalink
demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@ZQun
ZQun committed Nov 23, 2017
1 parent c519e27 commit 5260f08
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 68 deletions.
20 changes: 20 additions & 0 deletions app/web/component/app/demo.vue
View file
@@ -0,0 +1,20 @@
<template>
<div>
<h1>
Hello World!!!!
</h1>
</div>
</template>

<script type="text/babel">
export default {
computed: {
}
}
</script>


<style>
</style>
111 changes: 59 additions & 52 deletions app/web/component/app/list.vue
View file
@@ -1,63 +1,70 @@
<template>
<div style="font-size: 24px; text-align: center">
<div class="container smart-container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-12 col-sm-9">
<ul class="smart-artiles" id="articleList">
<li v-for="item in articleList">
<div class="point">+{{item.hits}}</div>
<div class="card">
<h2><router-link :to="'/detail/'+item.id" class="nav-item-a">{{item.title}}</router-link></h2>
<div>
<ul class="actions">
<li>
<time class="timeago">{{item.moduleName}}</time>
</li>
<li class="tauthor">
<a href="#" target="_blank" class="get">Sky</a>
</li>
<li><a :href="item.url" target="_blank">原文</a></li>
<li>
<span class="timeago">{{item.summary}}</span>
</li>
<li>
<span class="timeago"></span>
</li>
</ul>
<div style="font-size: 24px; text-align: center">
<div class="container smart-container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-12 col-sm-9">
<ul class="smart-artiles" id="articleList">
<div>
<h3>DEMO</h3>
<router-view name="demo"></router-view>
</div>
<li v-for="item in articleList">
<div class="point">+{{item.hits}}</div>
<div class="card">
<h2>
<router-link :to="'/detail/'+item.id" class="nav-item-a">{{item.title}}
</router-link>
</h2>
<div>
<ul class="actions">
<li>
<time class="timeago">{{item.moduleName}}</time>
</li>
<li class="tauthor">
<a href="#" target="_blank" class="get">Sky</a>
</li>
<li><a :href="item.url" target="_blank">原文</a></li>
<li>
<span class="timeago">{{item.summary}}</span>
</li>
<li>
<span class="timeago"></span>
</li>
</ul>
</div>
</div>
</li>
</ul>
<div id="pagerBottom" class="smart-pager" v-if="isLoading">
<img src="../../asset/images/loading.gif">
</div>
</div>
</div>
</li>
</ul>
<div id="pagerBottom" class="smart-pager" v-if="isLoading">
<img src="../../asset/images/loading.gif">
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style>
</style>
<script type="text/babel">
export default{
computed: {
isLoading(){
return false;
},
articleList() {
return this.$store.state.articleList;
}
},
preFetch ({ state, dispatch, commit }) {
return Promise.all([
dispatch('FETCH_ARTICLE_LIST')
])
},
beforeMount() {
return Promise.all([
this.$store.dispatch('FETCH_ARTICLE_LIST')
]);
export default {
computed: {
isLoading() {
return false;
},
articleList() {
return this.$store.state.articleList;
}
},
preFetch({state, dispatch, commit}) {
return Promise.all([
dispatch('FETCH_ARTICLE_LIST')
])
},
beforeMount() {
return Promise.all([
this.$store.dispatch('FETCH_ARTICLE_LIST')
]);
}
}
}
</script>
38 changes: 22 additions & 16 deletions app/web/component/app/router.js
View file
Expand Up @@ -4,26 +4,32 @@ import VueRouter from 'vue-router';

import ListView from './list';
import DetailView from './detail';
// demo
// import demoTest from './demo.vue';

Vue.use(VueRouter);

const router = new VueRouter({
mode: 'history',
base: '/app',
routes: [
{
path: '/',
component: ListView
},
{
path: '/list',
component: ListView
},
{
path: '/detail/:id',
component: DetailView
}
]
mode: 'history',
base: '/app',
routes: [
{
path: '/',
components: {
default: ListView,
demo: () => import('./demo.vue')
// demo: demoTest
}
},
{
path: '/list',
component: ListView
},
{
path: '/detail/:id',
component: DetailView
}
]
});

export default router;

2 comments on commit 5260f08

@hubcarl
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

egg-vue-webpack-boilerplate/app/web/framework/vue/app.js 里面只会匹配当前的路由，子路由没有获取，你可以查一下资料看看是否可以获取当前组件的自组件，然后调用子组件的prefech看看，而且你这里用到了动态加载，具体你可以研究 一下。

 options.router.push(context.state.url);
      const matchedComponents = options.router.getMatchedComponents();
      if (!matchedComponents) {
        return Promise.reject({ code: '404' });
      }
      return Promise.all(
        matchedComponents.map(component => {
          if (component.preFetch) {
            return component.preFetch(options.store);
          }
          return null;
        })
      ).then(() => {
        context.state = options.store.state;
        return new Vue(options);
      });

@ZQun
Copy link
Owner Author

@ZQun ZQun commented on 5260f08 Nov 24, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK
我研究一下！

Please sign in to comment.