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

93 阅读 0 评论 62 点赞

我是靠谱客的博主美满乐曲，这篇文章主要介绍vue.js 单页面应用spa (single page application)vue.js 单页面应用spa (single page application)，现在分享给大家，希望可以做个参考。

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

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

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

引入vue-router.js模块
页面中定义相关元素
定义组件
整合组件
声明一个路由
获取关联（component关联数据）
开启路由

关于spa应用的几个方法：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    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>
            
            <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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!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>