vue构建单页面应用实战

import tab1 from "./tab1";
import tab2 from "./tab2";
module.exports = {
 template: require('../templates/index.html'),
 components:{
   "tab1":tab1,
   "tab2":tab2
 },
 ready: function () {
 }
};

在路由里加上子路由

module.exports = {
 '/': {
  component: require('./components/index'),
  //子路由
  subRoutes:{
   "/tab1":{
     component:require('./components/tab1')
   },
   "/tab2":{
     component:require('./components/tab2')
   }
  }
 },
  '/list': {
  component: require('./components/list')
 },
  '/show/:id': {
   name:"show",
   component: require('./components/show')
  },
 '*': {
  component: require('./components/notFound')
 }
}

好了，在浏览器里试一下：

初始状态：

点了 tab1，tab2：

Tab 切换没问题，可是，初始状态显示是空的，能不能默认显示 Tab1 Content 呢？很简单，调整下路由就可以了：

module.exports = {
 '/': {
  component: require('./components/index'),
  //子路由
  subRoutes:{
   //默认显示Tab1
   "/":{
     component:require('./components/tab1')
   },
   "/tab1":{
     component:require('./components/tab1')
   },
   "/tab2":{
     component:require('./components/tab2')
   }
  }
 }
}