首页手记 Vue2.0路由学习探索总结---simple-demo

Vue2.0路由学习探索总结---simple-demo

标签：

Vue.js

Vue2.0路由学习探索总结---simple-demo

小试牛刀


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../vue.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../vue-router.js"></script>
<style>
.router-link-active {
color: red
}
</style>
</head>
<body>
<div id="app">
<p>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<router-view>
</router-view>
</div>

</body>
<script>
const Foo = {template: '<div>foo</div>'};
const Bar = {template: '<div>bar</div>'};
const router = new VueRouter({
routes: [
{path: '/foo', component: Foo},
{path: '/bar', component: Bar}
]
});
const app = new Vue({
router
}).$mount('#app')
</script>
</html>