本文共 2346 字，大约阅读时间需要 7 分钟。

1.说明

本文写的主要针对0.7.X版本的vue router。

官方介绍： Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。 对比： 传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

2.创建一个简单的路由

1）route-config.js

// 需要的路由关系一般都写在route-config.js文件中//引入组件，Home和About是两个自定义的组件import Home from './components/Home.vue'import About from './components/About.vue'//设置路由映射关系export default {
   	'home': {
   		component: Home	},	'about': {
   		component: About	}}

2）main.js

//前两个是引用了vue和vue-router组件import Vue from 'vue'import VueRouter from 'vue-router'// 引入router的设置import routeConfig from './route-config'//用它来表示，在vue项目中使用vue-routerVue.use(VueRouter)// 创建路由const router = new VueRouter()//映射路由router.map(routeConfig)//构建组件const App = Vue.extend(require('./app.vue'))//启动路由，将路由挂载到app.vue页面的id为app的dom下面router.start(App, '#app')

3）App.vue

3. 路由嵌套

嵌套路由和简单路由的差别也就是路径映射了

1）route-config.js

import Home from './components/Home.vue'import About from './components/About.vue'import News from './components/News.vue'import Message from './components/Message.vue'export default {
   	'home': {
   		component: Home,		//设置Home页面中的路由		subRoutes: {
   			'news': {
   				component: News			},			'message': {
   				component: Message			}		}	},	'about': {
   		component: About	}}

2）App.vue

template>	
   
		
    
			
     
				
      
					
       
Router Demo - 02
				
      
			
     
		
    
		
    
			
     
				
      
					
       					
       Home					
       About				
      
			
     
			
     
				
      
					
       
						
        						
        					
       
				
      
			
     
		
    
	
   

3）Home.vue

4. 0.7.X版本和2.X版本的比较

1）router.start 替换

0.7.X版本： router.start({ template: ‘’ }, ‘#app’) 2.X： new Vue({ el: ‘#app’, router: router, template: ‘’ }) 2）router.map 替换 0.7.X： router.map({ ‘/foo’: { component: Foo }, ‘/bar’: { component: Bar } }) 2.X： var router = new VueRouter({ routes: [ { path: ‘/foo’, component: Foo }, { path: ‘/bar’, component: Bar } ] })

转载地址：http://kurlf.baihongyu.com/