Vue

This page (revision-6) was last changed on 08-Jun-2020 11:58 by Dieter Käppel

This page was created on 17-Mar-2020 15:04 by Dieter Käppel

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Page revision history

Version Date Modified Size Author Changes ... Change note
6 08-Jun-2020 11:58 4 KB Dieter Käppel to previous
5 08-Jun-2020 11:58 4 KB Dieter Käppel to previous | to last
4 08-Jun-2020 10:12 4 KB Dieter Käppel to previous | to last
3 09-May-2020 18:16 3 KB Dieter Käppel to previous | to last
2 21-Mar-2020 10:45 1 KB Dieter Käppel to previous | to last
1 17-Mar-2020 15:04 862 bytes Dieter Käppel to last

Page References

Incoming links Outgoing links

Version management

Difference between version and

At line 103 added 43 lines
!!!Vue Router
Eine Erweiterung ist Vue Router, kann als vue-router.js downgeloaded werden.
!!Konfiguration
Das main.js sieht wie folgt aus:
{{{
define(["vue", "vue-router"], function(Vue, VueRouter) {
Vue.use(VueRouter);
return new Vue({
router: new VueRouter({
mode: "history"
})
});
})
}}}
__Hinweis:__ Ohne mode: history wird mit der hässlichen URL-Endung "!#" gearbeitet, weil alte Browser das programmatische Ändern der URL-Zeile nicht unterstützen.
!!Query Binding
Die Query-Parameter sind über this.$route.query komfortabel zugänglich. Leider können sie nicht verändert werden. Eine Erweiterung dafür sieht wie folgt aus:
{{{
require(["vue", "jquery"], function(Vue, $) {
Vue.util.defineReactive(Vue.prototype, "$query", {});
Vue.mixin({
mounted: function() {
if (!this.$parent && this.$router) {
this.$query = $.extend(true, {}, this.$route.query);
this.$watch("$query", {
handler: function(value) {
this.$router.push({
query: value
});
},
deep: true
});
}
}
});
});
}}}