非2.0的

vue2.0还有vue-router2.0的改变还是挺大的

 

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

 

现在以一个简单的单页面应用开启vue-router之旅，这个单页面应用有两个路径：/home和/about，与这两个路径对应的是两个组件Home和About。

1. 创建组件

首先引入vue.js和vue-router.js：

然后创建两个组件构造器Home和About：

// 定义组件var Home = Vue.extend({    template: '
     
      
Home
      
{
    {msg}}
     
',    data: function() {        return {            msg: 'Hello, vue router!'        }    }})var About = Vue.extend({    template: '
     
      
About
      
This is the tutorial about vue-router.
     
'})

2. 创建Router

var router = new VueRouter()

调用构造器VueRouter，创建一个路由器实例router。

3. 映射路由

router.map({    '/home': {        component: Home    },    '/about': {        component: About    }})

调用router的map方法映射路由，每条路由以key-value的形式存在，key是路径，value是组件。

例如：'/home'是一条路由的key，它表示路径；{component: Home}则表示该条路由映射的组件。

4. 使用v-link指令

     
    
          
      Home    
      About
     

在a元素上使用v-link指令跳转到指定路径。

5. 使用<router-view>标签

在页面上使用<router-view></router-view>标签，它用于渲染匹配的组件。

6. 启动路由

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

路由器的运行需要一个根组件，router.start(App, '#app') 表示router会创建一个App实例，并且挂载到#app元素。

注意：使用vue-router的应用，不需要显式地创建Vue实例，而是调用start方法将根组件挂载到某个元素。

 

http://blog.csdn.net/sinat_17775997/article/details/52549123

 

完整代码：

    
                         
     
        
      
Welcome!
        
      
            
                   
       Home            
       About