Skip to content

Commit b20bc50

Browse files
Casper LaiCasper Lai
Casper Lai
authored and
Casper Lai
committed
Upgrade vue 2.0
Example also support vue 2.0
1 parent 1b16521 commit b20bc50

9 files changed

+84
-55
lines changed

‎CHANGELOG.md

+13-5
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,38 @@
1-
0.3.0 / 2016-05-14
1+
0.3.1 / 2016-05-15
2+
==================
3+
4+
* 0.3.1
5+
* Property not method
6+
* Added changelog generator
7+
* Updated readme
8+
9+
0.3.0 / 2016-05-15
210
==================
311

412
* Version bump
513
* 0.3.0
614
* Added actual readme and example
715

8-
0.2.2 / 2016-04-17
16+
0.2.2 / 2016-04-18
917
==================
1018

1119
* 0.2.2
1220
* Create README.md
1321

14-
0.2.1 / 2016-04-17
22+
0.2.1 / 2016-04-18
1523
==================
1624

1725
* 0.2.1
1826
* Removed name
1927

20-
0.2.0 / 2016-04-17
28+
0.2.0 / 2016-04-18
2129
==================
2230

2331
* 0.2.0
2432
* removed vueify
2533
* Removed debug
2634

27-
0.1.0 / 2016-04-17
35+
0.1.0 / 2016-04-18
2836
==================
2937

3038
* 0.1.0

‎dist/vue-breadcrumbs.common.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
/*!
2-
* vue-breadcrumbs v0.3.0
2+
* vue-breadcrumbs v0.3.1
33
* (c) 2016 Sam Turrell
44
* Released under the MIT License.
55
*/
66
'use strict';
77

88
function plugin(Vue) {
9-
var options = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
9+
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
1010

1111
Object.defineProperties(Vue.prototype, {
1212
$breadcrumbs: {
1313
get: function get() {
1414
var crumbs = [];
1515
for (var i = 0; i < this.$route.matched.length; i++) {
16-
if (this.$route.matched[i].handler && this.$route.matched[i].handler.breadcrumb) {
16+
if (this.$route.matched[i].meta && this.$route.matched[i].meta.breadcrumb) {
1717
crumbs.push(this.$route.matched[i]);
1818
}
1919
}
@@ -23,10 +23,10 @@ function plugin(Vue) {
2323
});
2424

2525
Vue.component('breadcrumbs', {
26-
template: '<nav class="breadcrumbs" v-if="$breadcrumbs.length"> <ul> <li v-for="(i, crumb) in $breadcrumbs"> <a v-link="crumb">{{ crumb.handler.breadcrumb }}</a> </li> </ul> </nav>'
26+
template: '<nav class="breadcrumbs" v-if="$breadcrumbs.length"> <ul> <li v-for="(crumb, i) in $breadcrumbs"> <router-link :to=" { path: crumb.path }">{{ crumb.meta.breadcrumb }}</router-link> </li> </ul> </nav>'
2727
});
2828
}
2929

30-
plugin.version = '0.3.0';
30+
plugin.version = '0.3.1';
3131

3232
module.exports = plugin;

‎dist/vue-breadcrumbs.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* vue-breadcrumbs v0.3.0
2+
* vue-breadcrumbs v0.3.1
33
* (c) 2016 Sam Turrell
44
* Released under the MIT License.
55
*/
@@ -10,14 +10,14 @@
1010
}(this, function () { 'use strict';
1111

1212
function plugin(Vue) {
13-
var options = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
13+
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
1414

1515
Object.defineProperties(Vue.prototype, {
1616
$breadcrumbs: {
1717
get: function get() {
1818
var crumbs = [];
1919
for (var i = 0; i < this.$route.matched.length; i++) {
20-
if (this.$route.matched[i].handler && this.$route.matched[i].handler.breadcrumb) {
20+
if (this.$route.matched[i].meta && this.$route.matched[i].meta.breadcrumb) {
2121
crumbs.push(this.$route.matched[i]);
2222
}
2323
}
@@ -27,11 +27,11 @@
2727
});
2828

2929
Vue.component('breadcrumbs', {
30-
template: '<nav class="breadcrumbs" v-if="$breadcrumbs.length"> <ul> <li v-for="(i, crumb) in $breadcrumbs"> <a v-link="crumb">{{ crumb.handler.breadcrumb }}</a> </li> </ul> </nav>'
30+
template: '<nav class="breadcrumbs" v-if="$breadcrumbs.length"> <ul> <li v-for="(crumb, i) in $breadcrumbs"> <router-link :to=" { path: crumb.path }">{{ crumb.meta.breadcrumb }}</router-link> </li> </ul> </nav>'
3131
});
3232
}
3333

34-
plugin.version = '0.3.0';
34+
plugin.version = '0.3.1';
3535

3636
return plugin;
3737

‎dist/vue-breadcrumbs.min.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-breadcrumbs.min.js.gz

11 Bytes
Binary file not shown.

‎examples/index.html

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>Vue Breadcrumbs example</title>
4+
<title>Vue Breadcrumbs example for Vue 2.0</title>
55
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6-
<script src="https://cdn.jsdelivr.net/vue/1.0.10/vue.js"></script>
7-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/0.7.13/vue-router.min.js"></script>
6+
<script src="http://cdn.jsdelivr.net/vue/2.0.1/vue.js"></script>
7+
<script type="text/javascript" src="https://unpkg.com/vue-router@2.0.0"></script>
88
<script src="../dist/vue-breadcrumbs.min.js"></script>
99
<style type="text/css">
1010
nav.breadcrumbs ul {
@@ -30,18 +30,18 @@ <h1>Hello App!</h1>
3030
<breadcrumbs></breadcrumbs>
3131
<p>
3232
<!-- use v-link directive for navigation. -->
33-
<a v-link="{ path: '/' }">Home</a>
34-
<a v-link="{ path: '/foo' }">Foo</a>
35-
<a v-link="{ path: '/bar' }">Bar</a>
36-
<a v-link="{ path: '/about' }">About</a>
37-
<a v-link="{ path: '/about/foo' }">About Foo</a>
38-
<a v-link="{ path: '/about/bar' }">About Bar</a>
33+
<router-link :to="{ path: '/' }">Home</router-link>
34+
<router-link :to="{ path: '/foo' }">Foo</router-link>
35+
<router-link :to="{ path: '/bar' }">Bar</router-link>
36+
<router-link :to="{ path: '/about' }">About</router-link>
37+
<router-link :to="{ path: '/about/foo' }">About Foo</router-link>
38+
<router-link :to="{ path: '/about/bar' }">About Bar</router-link>
3939
</p>
4040
<!-- use router-view element as route outlet -->
4141
<router-view></router-view>
4242
<h2>Matched routes ({{ $breadcrumbs.length }}):</h2>
4343
<pre>
44-
{{ $breadcrumbs | json }}
44+
{{ $breadcrumbs }}
4545
</pre>
4646
</div>
4747
<script src="./index.js"></script>

‎examples/index.js

+45-24
Original file line numberDiff line numberDiff line change
@@ -17,52 +17,73 @@ Vue.use(VueBreadcrumbs)
1717
// for demo purposes, we will just use an empty one
1818
// because we are using the HTML as the app template.
1919
var App = Vue.extend({
20-
ready: function() {
20+
mounted: function() {
2121
if (window.console && window.console.log) {
2222
console.log(this.$breadcrumbs);
2323
}
2424
}
2525
})
26-
27-
// create a router instance
28-
// you can pass in additional options here, but
29-
// let's keep it simple for now.
30-
var router = new VueRouter()
31-
32-
26+
Vue.component(App);
3327
// define some routes.
3428
// each route should map to a component.
3529
// we'll talk about nested routes later.
36-
router.map({
37-
'/': {
38-
breadcrumb: 'Home Page',
30+
var routes = [
31+
{
32+
path: '/',
3933
component: Page,
34+
meta: {
35+
breadcrumb: 'Home Page'
36+
}
4037
},
41-
'/foo': {
38+
{
39+
path: '/foo',
4240
component: Foo,
43-
breadcrumb: 'Foo Page'
41+
meta: {
42+
breadcrumb: 'Foo Page'
43+
}
4444
},
45-
'/bar': {
45+
{
46+
path: '/bar',
4647
component: Bar,
47-
breadcrumb: 'Bar Page'
48+
meta: {
49+
breadcrumb: 'Bar Page'
50+
}
4851
},
49-
'about': {
52+
{
53+
path: '/about',
5054
component: Page,
51-
breadcrumb: 'About Us',
52-
subRoutes: {
53-
'/foo': {
55+
meta: {
56+
breadcrumb: 'About Us'
57+
},
58+
children: [
59+
{
60+
path: 'foo',
5461
component: Foo,
55-
breadcrumb: 'Foo About'
62+
meta: {
63+
breadcrumb: 'Foo About'
64+
}
5665
},
57-
'/bar': {
66+
{
67+
path: 'bar',
5868
component: Bar,
59-
breadcrumb: 'Bar About'
69+
meta: {
70+
breadcrumb: 'Bar About'
71+
}
6072
},
61-
}
73+
]
6274
}
75+
]
76+
77+
// create a router instance
78+
// you can pass in additional options here, but
79+
// let's keep it simple for now.
80+
var router = new VueRouter({
81+
routes
6382
})
6483

6584
// now we can start the app!
6685
// router will create an instance of App and mount to
6786
// the element matching the selector #app.
68-
router.start(App, '#app')
87+
new App({
88+
router
89+
}).$mount('#app')

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
"rollup-plugin-babel": "^2.2.0",
3838
"rollup-plugin-replace": "^1.1.0",
3939
"uglify-js": "^2.6.1",
40-
"vue": "^1.0.10",
40+
"vue": "^2.0.0",
4141
"webpack": "^1.12.9",
4242
"webpack-dev-server": "^1.14.0"
4343
},

‎src/index.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ function plugin (Vue, options = {}) {
44
get: function () {
55
var crumbs = []
66
for (var i = 0; i < this.$route.matched.length; i++) {
7-
if (this.$route.matched[i].handler && this.$route.matched[i].handler.breadcrumb) {
7+
if (this.$route.matched[i].meta && this.$route.matched[i].meta.breadcrumb) {
88
crumbs.push(this.$route.matched[i])
99
}
1010
}
@@ -14,10 +14,10 @@ function plugin (Vue, options = {}) {
1414
})
1515

1616
Vue.component('breadcrumbs', {
17-
template: '<nav class="breadcrumbs" v-if="$breadcrumbs.length"> <ul> <li v-for="(i, crumb) in $breadcrumbs"> <a v-link="crumb">{{ crumb.handler.breadcrumb }}</a> </li> </ul> </nav>'
17+
template: '<nav class="breadcrumbs" v-if="$breadcrumbs.length"> <ul> <li v-for="(crumb, i) in $breadcrumbs"> <router-link :to=" { path: crumb.path }">{{ crumb.meta.breadcrumb }}</router-link> </li> </ul> </nav>'
1818
})
1919
}
2020

21-
plugin.version = '0.3.0'
21+
plugin.version = '0.3.1'
2222

2323
export default plugin

0 commit comments

Comments
 (0)