您的位置：首页 > 移动开发

vue.js 单页面应用spa (single page application)

2017-01-08 00:08 337 查看

vue.js 单页面应用spa (single page application)

**路由：vue本身是没有路由的，需要加载路由模块vue-router.js。

下面我们分七步来阐述spa的简单过程：

引入vue-router.js模块

页面中定义相关元素

定义组件

整合组件

声明一个路由

获取关联（component关联数据）

开启路由

关于spa应用的几个方法：

1.当在css中使用 .v-link-active 时，指的是链接活跃时的class

2.<router-view></router-view> 渲染HTML的DOM结构

3.Vue.extend({template:'模板内容'}) 用于定义一个组件

4.Vue.extend({}) 整合组件

5.new VueRouter() 声明一个路由

6.Router.map({
'/关联的路径':{
component:'组件名称'
}
});
获取关联（component关联数据）

7.Router.start(路由名,'作用域') 在哪个作用域下开启路由。

下面是具体的实例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*.v-link-active:链接活跃时的 class */
.v-link-active{
color: red;
font-size: 30px;
}
</style>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="nav">
<ul>
<!-- 比如：一个带有指令v-link='/a'的元素，只要当前路径以/a开头，此元素就会被判断为活跃 -->
<li><a href="javascript:;" v-link="{path:'/index'}">首页</a></li>
<li><a href="javascript:;" v-link="{path:'/content'}">内容</a></li>
</ul>
<!-- 内容展示区 -->
<router-view></router-view>
</div>
</body>
</html>
<script>
//定义两个组件
var Index=Vue.extend({
template:'<h2>我是首页</h2>'
});
var Content=Vue.extend({
template:'<h2>我是内容页</h2>'
});
//整合组件
var app=Vue.extend({});
//声明一个路由
var Router=new VueRouter();
//获取全部关联
Router.map({
'/index':{
component:Index
},
'/content':{
component:Content
}
});
//开启路由
Router.start(app,'#nav');
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vue-js spa 路由 v-link 路由组件

相关文章推荐

新的分享

章节导航