<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.v-link-active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<a v-link="{ path: '/foo' }">Go to /foo</a>
<a v-link="{ path: '/foo/bar' }">Go to /foo/bar</a>
<a v-link="{ path: '/foo/baz' }">Go to /foo/baz</a>
<a v-link="{ path: '/doom' }">Go to /foo</a>
</p>
<router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="vue-resource.min.js"></script>
<script src="vue-router.js"></script>
<script src="vue-router-test-2.js"></script>
</body>
</html>
// define some components
var Foo = Vue.extend({
template:
'<div class="foo">' +
'<h2>This is Foo!</h2>' +
'<router-view></router-view>' + // <- nested outlet
'</div>'
})
var Bar = Vue.extend({
template: '<p>This is bar!</p>'
})
var Baz = Vue.extend({
template: '<p>This is baz!</p>'
})
// configure router
var router = new VueRouter()
var Doom = Vue.extend({
template:"<div>末日爸爸</div>"
})
router.map({
'/foo': {
component: Foo,
// add a subRoutes map under /foo
subRoutes: {
'/': {
// This component will be rendered into Foo's <router-view>
// when /foo is matched. Using an inline component definition
// here for convenience.
component: {
template: '<p>Default sub view for Foo</p>'
}
},
'/bar': {
// Bar will be rendered inside Foo's <router-view>
// when /foo/bar is matched
component: Bar
},
'/baz': {
// same for Baz, but only when /foo/baz is matched
component: Baz
}
}
},
'/doom':{
component:Doom
}
})
// start app
var App = Vue.extend({})
router.start(App, '#app')