<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .v-link-active {
            color: red;
        }
    </style>
</head>
<body>

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <a v-link="{ path: '/foo' }">Go to /foo</a>
        <a v-link="{ path: '/foo/bar' }">Go to /foo/bar</a>
        <a v-link="{ path: '/foo/baz' }">Go to /foo/baz</a>
        <a v-link="{ path: '/doom' }">Go to /foo</a>
    </p>
    <router-view></router-view>
</div>

<script src="vue.js"></script>
<script src="vue-resource.min.js"></script>
<script src="vue-router.js"></script>
<script src="vue-router-test-2.js"></script>
</body>
</html>

// define some components
var Foo = Vue.extend({
    template:
    '<div class="foo">' +
    '<h2>This is Foo!</h2>' +
    '<router-view></router-view>' + // <- nested outlet
    '</div>'
})

var Bar = Vue.extend({
    template: '<p>This is bar!</p>'
})

var Baz = Vue.extend({
    template: '<p>This is baz!</p>'
})

// configure router
var router = new VueRouter()

var Doom = Vue.extend({
    template:"<div>末日爸爸</div>"
})
router.map({
    '/foo': {
        component: Foo,
        // add a subRoutes map under /foo
        subRoutes: {
            '/': {
                // This component will be rendered into Foo's <router-view>
                // when /foo is matched. Using an inline component definition
                // here for convenience.
                component: {
                    template: '<p>Default sub view for Foo</p>'
                }
            },
            '/bar': {
                // Bar will be rendered inside Foo's <router-view>
                // when /foo/bar is matched
                component: Bar
            },
            '/baz': {
                // same for Baz, but only when /foo/baz is matched
                component: Baz
            }
        }
    },
    '/doom':{
    component:Doom
}
})

// start app
var App = Vue.extend({})
router.start(App, '#app')
												


											
Vue.js相关知识4-路由的更多相关文章
	

    
						
  1. Vue.js 相关知识（路由）
		
    1. 简介 路由,工作原理与路由器相似(路由器将网线总线的IP分发到每一台设备上),Vue中的路由根据用户在网页中的点击,将其引导到对应的页面. 2. 使用步骤 安装vue-router或者直接引入v ...
    
		
    2. 
						
  2. Vue.js相关知识3-路由
		
    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
    
		
    3. 
								
  3. Vue.js相关知识2-组件
		
    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
    
		
    4. 
						
  4. Vue.js相关知识1
		
    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
    
		
    5. 
						
  5. Vue.js 相关知识（动画）
		
    1. 简介 Vue 在插入.更新或移除 DOM 时,提供多种不同方式的过渡效果,并提供 transition 组件来实现动画效果(用 transition 组件将需执行过渡效果的元素包裹) 语法:&l ...
    
		
    6. 
						
  6. Vue.js 相关知识（组件）
		
    1. 组件介绍 组件(component),vue.js最强大的功能之一 作用:封装可重用的代码,通常一个组件就是一个功能体,便于在多个地方都能调用该功能体 根组件:我们实例化的Vue对象就是一个组件 ...
    
		
    7. 
						
  7. Vue.js 相关知识（基础）
		
    1. Vue.js 介绍 Vue,读音 /vjuː/,类似于 view),是一套用于构建用户界面的渐进式框架(重点在于视图层). 作者:尤雨溪 注:学习 vue.js 时,一定要抛弃 jQuery 的 ...
    
		
    8. 
						
  8. Vue.js 相关知识（脚手架）
		
    1. vue-cli 简介 Vue-cli 是 vue的设计者,为提升开发效率而提供的一个脚手架工具,可通过vue-cli快速构造项目结构 2. vue-cli 安装步骤 安装npm 或 cnpm n ...
    
		
    9. 
						
  9. vue.js基础知识篇(2):指令详解
		
    第三章:指令 1.语法 指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 展辰涂料如何利用K2BPM加强流程管控？
			
    展辰涂料集团股份有限公司是一家集环保涂料研发.生产.销售和工程施工为一体的国家级高新技术企业.展辰涂料集团股份有限公司是我国最大的民族涂料企业之一,自成立以来就高度注重产品技术研发,截至目前,公司已取 ...
    
			
    2. 
						
  2. Spring学习笔记之初始化和销毁方法的调用次序
			
    Multiple lifecycle mechanisms configured for the same bean, with different initialization methods, a ...
    
			
    3. 
						
  3. DotNetBar v12.6.0.4 Fully Cracked
			
    更新信息: http://www.devcomponents.com/customeronly/releasenotes.asp?p=dnbwf&v=12.6.0.4 如果遇到破解问题可以与我 ...
    
			
    4. 
						
  4. JVM-class文件完全解析-字段表集合
			
     字段表集合 这个class文件的解析,分析得有点太久了．前面介绍类魔数,次版本号,主板本号,常量池入口,常量池,访问标志,类索引,父类索引和接口索引集合．下面就应该到字段表集合了．  紧接着接口索引 ...
    
			
    5. 
						
  5. Allegro PCB SI （2）
			
    整理一下在电研院学的si (虽然彩超的si在频率15Mhz以上后,si是失真的.昨晚遇到孔大哥也是这样说的,板级仿真,要layout过硬,然后找到合适的top test point) Allegro  ...
    
			
    6. 
						
  6. (转)IOS之Info.plist文件简介
			
    原文:IOS之Info.plist文件简介 http://www.apkbus.com/android-130240-1-1.html (出处: Android开发论坛 - 安卓开发论坛 - Andr ...
    
			
    7. 
						
  7. ubuntu 　输入时弹出剪切板候选项
			
    fcitx很坑的把这个功能的快捷键设置成了ctrl + ;结果我在用vim的时候怎么也 没法输入command 不知道是哪次更新引入的,简直是坑人! 我找了半天系统设置都没找到这个快捷键是在哪设置的． ...
    
			
    8. 
						
  8. GSM短信侦听的便宜方案
			
    侦听GSM短信常用的是OsmocomBB + C118方案,主要是用luca/gsmmap分支.使用ccch_scan这个程序可以把通信封装成GSMTAP发给本机,然后用WireShark接收GSMT ...
    
			
    9. 
						
  9. UIKit框架之UIlabel
			
    1.继承链:UIview:UIresponder:NSObject 2.如果你想要使UIlabel能够和用户进行互动,需要把它实例变量的属性 userInteractionEnabled改为yes 3 ...
    
			
    10. 
						
  10. BZOJ 2467 生成树
			
    当(n-1)条中间的边:4^(n-1)*4*C(n-1,n). ......以此类推Σ. f[n]=Σ(i=0..n-1)4^(i+1)*(n-i)*C(n,i) =Σ(i=0..n-1)4^(i+1 ...
    
			
    11.