gitHub地址:https://github.com/lily1010/vue_singlePage
举个栗子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<div id="app">
<a class="list-group-item" v-link="{ path: ‘/home‘}">Home</a>
<a class="list-group-item" v-link="{ path: ‘/about‘}">About</a>
<router-view></router-view>
</div>
<template id="home">
<h1>
我是home
</h1>
</template>
<template id="about">
<h1>
我是about
</h1>
</template>
<script type="text/javascript">
//声明使用路由
Vue.use(VueRouter);
var home = Vue.extend({
template: "#home"
})
var about = Vue.extend({
template: "#about"
})
//创建路由
var router = new VueRouter();
//映射路径
router.map({
‘/home‘:{component:home},
‘/about‘:{component:about}
})
//启动路由
var app = Vue.extend({});
router.start(app,"#app");
</script>
</body>
</html>
时间： 2024-10-12 21:03:10