vue-router的一个小实例
非2.0的
vue2.0还有vue-router2.0的改变还是挺大的
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。
现在以一个简单的单页面应用开启vue-router之旅，这个单页面应用有两个路径：/home和/about，与这两个路径对应的是两个组件Home和About。
1. 创建组件
首先引入vue.js和vue-router.js：
<script src="js/vue.js"></script> <script src="js/vue-router.js"></script>
然后创建两个组件构造器Home和About：
// 定义组件
var Home = Vue.extend({
template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
data: function() {
return {
msg: 'Hello, vue router!'
}
}
})
var About = Vue.extend({
template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
})2. 创建Router
var router = new VueRouter()
调用构造器VueRouter，创建一个路由器实例router。
3. 映射路由
router.map({
'/home': {
component: Home
},
'/about': {
component: About
}
})调用router的map方法映射路由，每条路由以key-value的形式存在，key是路径，value是组件。
例如：'/home'是一条路由的key，它表示路径；{component: Home}则表示该条路由映射的组件。
4. 使用v-link指令
<div class="content">
<!-- 使用指令 v-link 进行导航。 -->
<a class="select" v-link="{ path: '/home' }">Home</a>
<a class="select" v-link="{ path: '/about' }">About</a>
</div>在a元素上使用v-link指令跳转到指定路径。
5. 使用<router-view>标签
<router-view></router-view>
在页面上使用<router-view></router-view>标签，它用于渲染匹配的组件。
6. 启动路由
var App = Vue.extend({})
router.start(App, '#app')路由器的运行需要一个根组件，router.start(App, '#app') 表示router会创建一个App实例，并且挂载到#app元素。
注意：使用vue-router的应用，不需要显式地创建Vue实例，而是调用start方法将根组件挂载到某个元素。
http://blog.csdn.net/sinat_17775997/article/details/52549123
完整代码：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>router</title>
<style type="text/css">
html,body{
width: 100%;
height: 100%
}
#app{
width: 60%;
height: 100%;
margin: 0 auto;
}
.content{
width: 300px;
height: 50px;
}
.select{
display: inline-block;
line-height: 50px;
padding: 0 30px;
font-size: 20px;
background-color: #ffffff;
border: 1px solid #ecf0f1;
text-align: center;
color: #555555;
text-decoration:none;
}
</style>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
</head>
<body>
<div >
<h1 class="title">Welcome!</h1>
<div class="content">
<!-- 使用指令 v-link 进行导航。 -->
<a class="select" v-link="{ path: '/home' }">Home</a>
<a class="select" v-link="{ path: '/about' }">About</a>
</div>
<!-- 路由外链 -->
<router-view></router-view>
</div>
<script type="application/javascript">
// 定义组件
var Home = Vue.extend({
template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
data: function() {
return {
msg: 'Hello, vue router!'
}
}
})
var About = Vue.extend({
template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
})
// 创建一个路由器实例
// 创建实例时可以传入配置参数进行定制，为保持简单，这里使用默认配置
var router = new VueRouter()
// 定义路由规则
// 每条路由规则应该映射到一个组件。这里的“组件”可以是一个使用 Vue.extend
// 创建的组件构造函数，也可以是一个组件选项对象。
router.map({
'/home': {
component: Home
},
'/about': {
component: About
}
})
router.redirect({
'/': '/home'
})
// 路由器需要一个根组件。
// 出于演示的目的，这里使用一个空的组件，直接使用 HTML 作为应用的模板
var App = Vue.extend({})
// 启动应用！
// 路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。
router.start(App, '#app')
</script>
</body>
</html>- 上一篇 »Vue，十六vue-router路由
- 下一篇 »Vue.js中安装一个路由器demo