Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit06a032e

Browse files
imple dynamic route for different Markdonw file
1 parent1d6bb12 commit06a032e

File tree

10 files changed

+46
-25
lines changed

10 files changed

+46
-25
lines changed

‎babel.config.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable */
12
module.exports={
2-
presets:['@vue/app']
3+
presets:['@vue/app',],
34
}

‎src/App.vue‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,20 @@
11
<template>
22
<divid="app">
3-
<router-view/>
3+
<Home/>
44
</div>
55
</template>
66

7+
<script>
8+
importHomefrom'@/views/Home.vue'
9+
10+
exportdefault {
11+
name:'app',
12+
components: {
13+
Home,
14+
},
15+
}
16+
</script>
17+
718
<style>
819
#nav {
920
padding:30px;

‎src/components/CodeSnippet.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ export default {
2424
props: {
2525
codePenId: {
2626
type:String,
27-
default:'xJKRjY'
28-
}
29-
}
27+
default:'xJKRjY',
28+
},
29+
},
3030
}
3131
</script>

‎src/components/Content.vue‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,32 @@
22

33
<divclass="markdown-body">
44

5-
<testContent />
5+
<componentv-bind:is="currentContentPage" />
66

77
</div>
88
</template>
99

1010
<script>
1111
importVueMarkdownfrom'vue-markdown'
12-
importtestContentfrom'../../content/testA.md'
1312
import'highlight.js/styles/atom-one-dark.css'
1413
import'github-markdown-css'// eslint-disable-line
14+
importVuefrom'vue'
15+
16+
constdynamicContent=file=> ()=>import(`../../content/${file}.md`)
1517
1618
exportdefault {
1719
name:'Content',
1820
components: {
1921
VueMarkdown,
20-
testContent
21-
}
22+
},
23+
computed: {
24+
currentContentPage:function () {
25+
constpageName=this.$route.params.name
26+
constcomponent=dynamicContent(pageName)
27+
if (component)Vue.component(pageName, component)
28+
return pageName
29+
},
30+
},
2231
}
2332
</script>
2433

‎src/components/SlideMenu.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,6 @@
3939

4040
<script>
4141
exportdefault {
42-
name:'slideMenu'
42+
name:'slideMenu',
4343
}
4444
</script>

‎src/creators/slideMenuCreator.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+

‎src/main.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,5 @@ Vue.component('CodeSnippet', CodeSnippet)
1313

1414
newVue({
1515
router,
16-
render:h=>h(App)
16+
render:h=>h(App),
1717
}).$mount('#app')

‎src/router.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
importVuefrom'vue'
22
importRouterfrom'vue-router'
3-
importHomefrom'./views/Home.vue'
3+
importContentfrom'./components/Content.vue'
44

55
Vue.use(Router)
66

77
exportdefaultnewRouter({
8+
mode:'history',
89
routes:[
910
{
10-
path:'/',
11+
path:'/component/:name',
1112
name:'home',
12-
component:Home
13-
}
14-
]
13+
component:Content,
14+
},
15+
],
1516
})

‎src/views/Home.vue‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@
55
<SliderMenu />
66
</ca-flex>
77
<ca-flexcol="xs12 sm10 md10 lg10 xl10"class="content">
8-
<!-- <CodeSnippet/>-->
9-
<Content/>
8+
<router-view/>
109
</ca-flex>
1110
</ca-layout>
1211
</div>
@@ -15,19 +14,17 @@
1514
<script>
1615
// @ is an alias to /src
1716
importSliderMenufrom'@/components/SlideMenu.vue'
18-
importContentfrom'@/components/Content.vue'
1917
importCodeSnippetfrom'@/components/CodeSnippet.vue'
2018
2119
exportdefault {
2220
name:'home',
2321
components: {
2422
SliderMenu,
25-
Content,
26-
CodeSnippet
23+
CodeSnippet,
2724
},
2825
data: ()=> ({
29-
model:100
30-
})
26+
model:100,
27+
}),
3128
}
3229
</script>
3330

‎vue.config.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ module.exports = {
1010
.loader('vue-markdown-loader/lib/markdown-compiler')
1111
.tap(options=>{
1212
return{
13-
raw:true
13+
raw:true,
1414
}
1515
})
1616
.end()
17-
}
17+
},
1818
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp