Vue.js的路由简单实例
程序员文章站
2022-03-25 11:30:22
...
<html>
<header>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
<style>
.active{
width: 100px;
height: 100px;
background: #444;
color: #eee;
}
.danger {
background: #eee;
color: #fff;
}
</style>
</header>
<body>
<div id="firstapp">
<p>Hello Router!</p>
<p>
<router-link to="/dongjin">dongjin</router-link>
<router-link to="/hexin">hexin</router-link>
<router-link to="/baidu">baidu</router-link>
</p>
<router-view></router-view>
</div>
<script>
var dongjin = {template: '<div><h1>dongjin template</h1></div>'}
var hexin = {template: '<div class="active">hexin template</div>'}
var baidu = {template: '<div class="danger">baidu template</div>'}
var routes = [
{path: '/dongjin', component: dongjin},
{path: '/hexin', component: hexin},
{path: '/baidu', component: baidu}
]
var router = new VueRouter({
routes
})
var vm = new Vue({
router
}).$mount('#firstapp')
</script>
</body>
</html>