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

最新推荐文章于 2024-07-16 10:33:57 发布

jyz6246

最新推荐文章于 2024-07-16 10:33:57 发布

阅读量4.7k

点赞数 1

分类专栏： vue-js-spa 文章标签： vue-js spa 路由 v-link 路由组件

本文链接：https://blog.csdn.net/jyz6246/article/details/54195141

版权

vue-js-spa 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>