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. 漫谈可视化Prefuse（六）---改动源码定制边粗细

    可视化一路走来,体会很多:博客一路写来,收获颇丰:代码一路码来,思路越来越清晰.终究还是明白了一句古话:纸上得来终觉浅,绝知此事要躬行. 跌跌撞撞整合了个可视化小tool,零零碎碎结交了众多的志同道合 ...

  2. 30套免费的响应式 HTML5 & CSS3 模板下载

    HTML5 和 CSS3 网站模板存在巨大的需求,网页设计师们都喜欢现成的网站模板,能够轻松地设计和开发美观,吸引眼球的网站.如果你正在寻找响应式的 HTML5 & CSS3 模板,那么你找对 ...

  3. 第一篇博文：PHP函数原型中的可选参数写法为什么这么写？

    第一篇,算是开始吧.简单写点儿东西. 刚开始学PHP,在看PHP Manual时遇到一个问题:含可选参数的函数原型中,可选参数的写法看不懂. 例如explode函数 array explode ( s ...

  4. SQL Server中参数化SQL写法遇到parameter sniff ，导致不合理执行计划重用的一种解决方案

    parameter sniff问题是重用其他参数生成的执行计划,导致当前参数采用该执行计划非最优化的现象.想必熟悉数据的同学都应该知道,产生parameter sniff最典型的问题就是使用了参数化的 ...

  5. css外部样式导入@import()

    <style> @import('相对路径下的文件全名'); p{color:red;} </style> 这种方式导入css文件其实用的不多,我一般都是用<link . ...

  6. ASP.NET Core 开发-中间件(StaticFiles)使用

    ASP.NET Core 开发,中间件(StaticFiles)的使用,我们开发一款简易的静态文件服务器. 告别需要使用文件,又需要安装一个web服务器.现在随时随地打开程序即可使用,跨平台,方便快捷 ...

  7. WinPhone学习笔记（四）——磁贴

    对每个Windows Phone的使用者来说,给他们的第一印象就是大大小小的磁贴——Metro,本篇介绍的是Windows Phone的磁贴,提到的有开始菜单的磁贴,也有在App里面的磁贴. 开始菜单 ...

  8. Winform 导入导出方法

    导出时:引用 using Excel = Microsoft.Office.Interop.Excel; #region 读取excel //打开方法 public DataTable Excelto ...

  9. 第二讲：WCF介绍（2）

    代码 https://yunpan.cn/cPns5DkGnRGNs   密码:3913   在上一讲中我们说到 在代码 当中  完成了 服务的寄宿. 这里我们说下 在实际的开发 当中 我们一般不会去 ...

  10. 【Java每日一题】20161021

    20161020问题解析请点击今日问题下方的"[Java每日一题]20161021"查看 package Oct2016; public class Ques1021 { publ ...