vue本身是不支持路由，想用的话就得引入一个模块
vue-router 路由模块
<script type="text/javascript" src="js/vue-router.js" ></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.v-link-active{
color:#ff0080;
font-size: 30px;
}
</style>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-router.js" ></script>
<body>
<div id="box">
<h1>vue路由</h1>
<ul>
<li><a v-link="{path:'/home'}">主页</a></li>
<li><a v-link="{path:'/other'}">其他</a></li>
</ul>
<router-view></router-view>
</div>
</body>
</html>
<script>
var Home=Vue.extend({
template:'<h1>我是主页</h1>'
});
var Other=Vue.extend({
template:'<h1>我是其他页面</h1>'
});
var App=Vue.extend();
//路由
var Router=new VueRouter();
Router.map({
'/home':{
component:Home
},
'/other':{
component:Other
}
});
//开启
Router.start(App,'#box');
</script>
网友评论