<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-router基本用法</title>
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script src="https://cdn.jsdeliver.net/vue.router/0.7.10/vue-router.min.js"></script>
</head>
<body>
<div id="app">
<nav class="navbar navbar-inverse">
<div class="container">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
<!-- 使用 v-link指令，path的值对应跳转的路径，即#!/home -->
<a v-link="{path:'/home'}">Home</a>
</li>
<li>
<a v-link="{path:'/list'}">List</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<!-- 路由切换组件template插入的位置 -->
<router-view></router-view>
</div>
</div>
<script>
//创建子组件，相当于路径对应的页面
var Home=Vue.extend({
template:'<h1>This is the home page</h1>'
});
//创建根组件
var App=Vue.extend({})
//创建路由器实例
var router=new VueRouter();
//通过路由器实例定义路由规则(需要在启动应用前定义好)
//每条路由会映射到一个组件。这个值可以是由Vue.extend创建的组件构造器函数(如Home)
//也可以直接使用组件选项对象(如'/list'中component对应的值)
router.map({
'/home':{
component:Home
},
'/list':{
component:{
template:'<h1>This is the List page</h1>'
}
}
})
//路由器实例会创建一个Vue实例，并且挂载到第二个参数元素选择器匹配的DOM上
router.start(App,"#app");
</script>
</body>
</html>注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。