1
Я нашел отличный пример использования маршрутизатора Vue. Вот файл app.js:Как интегрировать маршрутизатор Vue с Vue
// Telling Vue to use the router
Vue.use(VueRouter)
// Initializing the router with options
var router = new VueRouter({
history: false
});
// Redirect certain routes to other routes
router.redirect({
'/': '/users/list'
})
// Define your routes here.
// NOTE: You'd normally do something
// like require('./home/index.vue') for the component
router.map({
// Not found handler
'*': {
component: {
template:
'<div>' +
'<h1>Not Found</h1>' +
'</div>'
}
},
'/users': {
component: {
template:
'<div>' + // Wrap your views in one root html node so that the transitions work
'<h1>Users</h1>' +
'<ul class="nav nav-tabs">' +
'<li><a v-link="https://stackoverflow.com/users/list">List</a></li>' +
'<li><a v-link="https://stackoverflow.com/users/create">Create</a></li>' +
'</ul>' +
'<br>' +
// <router-view></router-view> is where the nested sub route views will appear.
// If you want the transitions to happen here you can copy the attributes on the router-view in codepen's HTML view and paste it here.
'<router-view></router-view>' +
'</div>'
},
subRoutes: {
'/list': {
component: {
template:
'<div>' +
'<ul><li><a v-link="https://stackoverflow.com/users/1/profile">Rick James</a></li></ul>' +
'</div>'
}
},
'/create': {
component: {
template:
'<form>' +
'<div class="form-group">' +
'<input class="form-control" type="text">' +
'</div>' +
'<button class="btn btn-primary">Create</button>' +
'</form>'
}
},
'/:id': {
component: {
template:
'<div>' +
'<h1>User Settings</h1>' +
'<ul class="nav nav-tabs">' +
'<li><a v-link="https://stackoverflow.com/users/{{route.params.id}}/profile">Profile</a></li>' +
'<li><a v-link="https://stackoverflow.com/users/{{route.params.id}}/posts">Posts</a></li>' +
'</ul>' +
'<br>' +
'<router-view></router-view>' +
'</div>'
},
subRoutes: {
'/profile': {
component: {
template: '<div>Name: Rick James<br>Email: [email protected]</div>'
}
},
'/posts': {
component: {
template: '<div><ul><li>Post Name 1</li><li>Post Name 2</li></ul></div>'
}
}
}
}
}
},
'/different': {
component: {
template: '<div>' +
'<h1>Different</h1><p>{{ test }}</p>' +
'</div>',
data: function() {
return {
test: 'Hello I am a data variable from Vue.JS'
}
}
}
},
'/about': {
component: {
template:
'<div>' +
'<h1>About</h1>' +
'<p>' +
'Well my father was a gambler down in Georgia,<br>' +
'He wound up on the wrong end of a gun.<br>' +
'And I was born in the back seat of a Greyhound bus<br>' +
'Rollin\' down highway 41.<br><br>' +
'Lord, I was born a ramblin\' man,<br>' +
'Tryin\' to make a livin\' and doin\' the best I can.<br>' +
'And when it\'s time for leavin\',<br>' +
'I hope you\'ll understand,<br>' +
'That I was born a ramblin\' man.' +
'</p>' +
'</div>'
}
}
});
// Declaring the app itself
var App = Vue.extend();
// Initializing the whole thing together
router.start(App, '#app')
Но я не знаю, где положить остальную часть кода. Например, вам нужно инициализировать Vue, не так ли? Где вы положили свои методы, ваши звонки в Вью ресурс и т.д. Я попытался добавить это:
var app = new Vue({
el : '#app',
methods: {
alertTest : function() {
alert('hello');
}
}
})
Но я не знаю, как интегрировать. Для alertTest у меня есть событие v-on на одном из моих ссылок. Вот ссылка:
<a class="list-group-item" v-link="https://stackoverflow.com/users/list" v-on="click: alertTest">Users</a>
Но событие не срабатывает. Я чувствую, что мне нужно связать первый блок кода (из учебника Майкла Дж. Калкина) во второй блок кода, чтобы событие срабатывало. Как мне это сделать? Я не знаю, где разместить остальную часть приложения, помимо маршрутизатора.
Просматривая передовой пример для Вью маршрутизатора на Github, я не вижу Vue сам будучи инстанцированный. – sehummel