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. Linux RHCS 基础维护命令

    本文只是介绍Linux RHCS最基本的一些维护命令,属于DBA应该了解的层面. 查看集群状态 集群正常启动 集群正常关闭 查看服务是否关闭开机启动 1. 查看集群状态 clustat cman_to ...

  2. Python编码问题整理

    认识常见编码 GB2312是中国规定的汉字编码,也可以说是简体中文的字符集编码 GBK 是 GB2312的扩展 ,除了兼容GB2312外,它还能显示繁体中文,还有日文的假名 cp936:中文本地系统是 ...

  3. java线程(2)--同步和锁

    参考转载:http://rainyear.iteye.com/blog/1734311 http://turandot.iteye.com/blog/1704027 http://www.cnblog ...

  4. 我如何调优SQL Server查询

    我是个懒人,我只想干尽可能少的活.当我干活的时候我不想太多.是,你没看错,这看起来很糟糕,作为一个DBA这很不合格.但在今天的文章里,我想给你展示下,当你想对特定查询创建索引设计时,你如何把你的工作和 ...

  5. JS魔法堂：再识ASCII实体、符号实体和字符实体

    一.前言            相信大家都熟悉通过字符实体   来实现多个连续空格的输入吧!本文打算对三类HTML实体及JS相关操作作进一步的整理和小结,若有纰漏请大家指正,谢谢. 二.初识HTML实 ...

  6. andriod + @的区别

    Android中的组件需要用一个int类型的值来表示,这个值也就是组件标签中的id属性值. id属性只能接受资源类型的值,也就是必须以@开头的值,例如,@id/abc.@+id/xyz等. 如果在@后 ...

  7. nodejs学习篇 (1)webstorm创建nodejs + express + jade 的web 项目

    之前简单了解过nodejs,觉得用nodejs来做个网站也太麻烦了,要自己拼html的字符串返回,这能做网站嘛? 最近看到使用jade模板来开发,觉得挺新奇的,于是试了一把,也了解了一些特性,算是个新 ...

  8. Sublime Text2配置过程

    今天Sublime Text2不知道为什么突然崩溃了,一直不能运行,没办法只有重装了,重装后按我的用途重新配置了一下,现将配置过程记录下来以备将来不时之需 说明:配置是在windows系统上进行的,其 ...

  9. 【转】nginx+iis实现负载均衡

    最近在研究分布式系统架构方面的知识,包括负载均衡,数据库读写分离,分布式缓存redis等.本篇先从负载均衡服务架构入手,关于负载均衡百度百科的定义如下:负载均衡,英文名称为Load Balance,其 ...

  10. QT添加二次确认功能，QMessageBox的使用

    对于一些重要的操作需要让用户再次确认一次,给出几个基本的实例 是和否 switch( QMessageBox::warning(NULL, "warning",QString::f ...