learning
/
vue-mastery
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Updated router for Eventlist example app

Browse Source
master
androiddrew 6 years ago
parent 07758bcad9
commit c6820b0428
9 changed files with 46 additions and 166 deletions
Show Stats Download Patch File Download Diff File

5
src/App.vue
Unescape Escape View File

@ -1,8 +1,9 @@
<template> <template>
<div id="app"> <div id="app">
<div id="nav"> <div id="nav">
<router-link :to="{ name: 'home' }">Home</router-link>| <router-link :to="{ name: 'event-list' }">List</router-link>|
<router-link to="/about">About</router-link> <router-link :to="{ name: 'event-show' }">Event # 1</router-link>|
<router-link :to="{ name: 'event-create' }">Create</router-link>|
</div> </div>
<router-view /> <router-view />
</div> </div>

23
src/components/EventCard.vue
Unescape Escape View File

@ -1,23 +0,0 @@
<template>
<div>
<h1 v-if="quote" @click="logDirp">Event Card</h1>
<p>{{ quote }}</p>
</div>
</template>
<script>
export default {
data() {
return {
quote: 'I am an event property'
}
},
methods: {
logDirp() {
console.log('Dirp')
}
}
}
</script>
<style></style>

114
src/components/HelloWorld.vue
Unescape Escape View File

@ -1,114 +0,0 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br />
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
>vue-cli documentation</a
>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
target="_blank"
rel="noopener"
>babel</a
>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
target="_blank"
rel="noopener"
>eslint</a
>
</li>
</ul>
<h3>Essential Links</h3>
<ul>
<li>
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
</li>
<li>
<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
>Forum</a
>
</li>
<li>
<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
>Community Chat</a
>
</li>
<li>
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
>Twitter</a
>
</li>
<li>
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
</li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li>
<a href="https://router.vuejs.org" target="_blank" rel="noopener"
>vue-router</a
>
</li>
<li>
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
</li>
<li>
<a
href="https://github.com/vuejs/vue-devtools#vue-devtools"
target="_blank"
rel="noopener"
>vue-devtools</a
>
</li>
<li>
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
>vue-loader</a
>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
rel="noopener"
>awesome-vue</a
>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

51
src/router.js
Unescape Escape View File

@ -1,6 +1,8 @@
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import Home from './views/Home.vue' import EventList from './views/EventList.vue'
import EventShow from './views/EventShow.vue'
import EventCreate from './views/EventCreate.vue'
Vue.use(Router) Vue.use(Router)
@ -10,26 +12,41 @@ export default new Router({
routes: [ routes: [
{ {
path: '/', path: '/',
// This is a named route. We can reference this instead of a static path in our router-links. name: 'event-list',
name: 'home', component: EventList
component: Home
}, },
{ {
path: '/about-us', path: '/event',
name: 'about', name: 'event-show',
// route level code-splitting component: EventShow
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ './views/About.vue'),
// an alias is also a viable option instead of a redirect like below
alias: '/about-alias'
}, },
{ {
path: '/about', path: '/event/create',
// here we are specifying the named route for the redirect. name: 'event-create',
// If you weren't using Named Routes you could also do `redirects: '/about-us'` component: EventCreate
redirect: { name: 'about' }
} }
// {
// path: '/',
// // This is a named route. We can reference this instead of a static path in our router-links.
// name: 'home',
// component: Home
// },
// {
// path: '/about-us',
// name: 'about',
// // route level code-splitting
// // this generates a separate chunk (about.[hash].js) for this route
// // which is lazy-loaded when the route is visited.
// component: () =>
// import(/* webpackChunkName: "about" */ './views/About.vue'),
// // an alias is also a viable option instead of a redirect like below
// alias: '/about-alias'
// },
// {
// path: '/about',
// // here we are specifying the named route for the redirect.
// // If you weren't using Named Routes you could also do `redirects: '/about-us'`
// redirect: { name: 'about' }
// }
] ]
}) })

5
src/views/About.vue
Unescape Escape View File

@ -1,5 +0,0 @@
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>

3
src/views/EventCreate.vue
Unescape Escape View File

@ -0,0 +1,3 @@
<template>
<h1>Create Event</h1>
</template>

3
src/views/EventList.vue
Unescape Escape View File

@ -0,0 +1,3 @@
<template>
<h1>Event Listing</h1>
</template>

3
src/views/EventShow.vue
Unescape Escape View File

@ -0,0 +1,3 @@
<template>
<h1>Event Show</h1>
</template>

5
src/views/Home.vue
Unescape Escape View File

@ -1,5 +0,0 @@
<template>
<div class="home">
<h1>The homepage</h1>
</div>
</template>
Write Preview
Loading…
Cancel
Save