gitHub地址:https://github.com/manlili/vue_spa

举个栗子:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    </head>

    <body>

        <div id="app">

            <a class="list-group-item" v-link="{ path: '/home'}">Home</a>

            <a class="list-group-item" v-link="{ path: '/about'}">About</a>

            <router-view></router-view>

        </div>

        <template id="home">

            <h1>

                我是home

            </h1>

        </template>

        <template id="about">

            <h1>

                我是about

            </h1>

        </template>

        <script type="text/javascript">

            //声明使用路由

            Vue.use(VueRouter); 

            var home = Vue.extend({

                template: "#home"

            })

            var about = Vue.extend({

                template: "#about"

            })

            //创建路由

            var router = new VueRouter();

            //映射路径

            router.map({

                '/home':{component:home},

                '/about':{component:about}

            })

            //启动路由

            var app = Vue.extend({});

            router.start(app,"#app");

        </script>

    </body>

</html>

vue单页面程序的更多相关文章

  1. 处理 Vue 单页面应用 SEO 的另一种思路

    vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plu ...

  2. 处理 Vue 单页面 SEO 的另一种思路

    vue-meta-info 官方地址: https://github.com/monkeyWang... (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender- ...

  3. [后端人员耍前端系列]KnockoutJs篇：使用WebApi+Bootstrap+KnockoutJs打造单页面程序

    一.前言 在前一个专题快速介绍了KnockoutJs相关知识点,也写了一些简单例子,希望通过这些例子大家可以快速入门KnockoutJs.为了让大家可以清楚地看到KnockoutJs在实际项目中的应用 ...

  4. Vue单页面骨架屏实践

    github 地址: VV-UI/VV-UI 演示地址: vv-ui 文档地址:skeleton 关于骨架屏介绍 骨架屏的作用主要是在网络请求较慢时,提供基础占位,当数据加载完成,恢复数据展示.这样给 ...

  5. vue单页面打包文件大？首次加载慢？按需加载？是你打开方式不对

    部署各vue项目,走了一遍坑.... vue单页面应用刷新404 找到nginx多网站配置文件:类似nginx/sites-available/www.baidu.com server { liste ...

  6. [one day one question] Vue单页面应用如何保证F5强刷不清空数据

    问题描述: Vue单页面用按F5强刷,数据就恢复初始了,这怎么破? 解决方案: store.subscribe((mutation, state) => { sessionStorage.set ...

  7. [转] 2017-11-20 发布 另辟蹊径：vue单页面，多路由，前进刷新，后退不刷新

    目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...

  8. vue单页面处理SEO问题

    设置vue 单页面meta info信息 vue-meta-info,(https://github.com/muwoo/vue-meta-info)如果需要单页面SEO,可以和 prerender- ...

  9. 基于AngularJs的单页面程序

    基于AngularJs的单页面程序 在Abpzero的后台管理系统是一个AngularJs的单页面程序.当你登陆后,系统会跳转到"ApplicationController",然后 ...

随机推荐

  1. 装X神器--Hacker Typer

    昨天在伯乐在线看到了这样一篇文章<终于也能像电影中的黑客那样写代码咯>,觉得很酷炫,介绍了一个叫Hacker Typer的工具 网址:http://hackertyper.net/ 在 P ...

  2. Dapper的基本使用

    Dapper是.NET下一个micro的ORM,它和Entity Framework或Nhibnate不同,属于轻量级的,并且是半自动的.也就是说实体类都要自己写.它没有复杂的配置文件,一个单文件就可 ...

  3. AngularJS in Action读书笔记6(实战篇)——bug hunting

    这一系列文章感觉写的不好,思维跨度很大,原本是由于与<Angularjs in action>有种相见恨晚而激发要写点读后感之类的文章,但是在翻译或是阐述的时候还是会心有余而力不足,零零总 ...

  4. PetaPojo —— JAVA版的PetaPoco

    背景 由于工作的一些原因,需要从C#转成JAVA.之前PetaPoco用得真是非常舒服,在学习JAVA的过程中熟悉了一下JAVA的数据组件: MyBatis 非常流行,代码生成也很成熟,性能也很好.但 ...

  5. Hyperledger智能合约Hello World示例程序

    简介 Hyperledger是Linux 基金会主导的一个开源的区块链(BlockChain)项目. 本文介绍了一个简单的Hyperledger智能合约的开发过程. 开发环境 本文使用Docker作为 ...

  6. 爬虫--Scrapy

    Scrapy Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 其可以应用在数据挖掘,信息处理或存储历史数据等一系列的程序中.其最初是为了页面抓取 (更确切来说, 网络抓取 )所设 ...

  7. HT for Web列表和3D拓扑组件的拖拽应用

    很多可视化编辑器都或多或少有一些拖拽功能,比如从一个List列表中拖拽一个节点到拓扑组件上进行建模,并且在拖拽的过程中鼠标位置下会附带一个被拖拽节点的缩略图,那么今天我们就来实现这样的拖拽效果. 首先 ...

  8. 博客已经转移到http://geekori.cn，本博客不再更新

    已经建立了独立博客:极客起源(http://geekori.cn),并将大部分博文已经转移到新的博客,本博客不再更新.

  9. H5新特性websocket

    websocket也是html5的新增加内容之一,号称是下一代客户端/服务器异步通信办法,私以为虽然有点吹牛的成分,但是以后说不定能成为异步通信的半壁江山,至于取代ajax,我觉的应该不会. webs ...

  10. 使用Python将HTML转成PDF

    主要使用的是wkhtmltopdf的Python封装--pdfkit 安装 1. Install python-pdfkit: $ pip install pdfkit 2. Install wkht ...