vue.js命名视图在应用程序启动时加载

我是vue.js新手，在启动vue应用程序时，我不知道如何加载和渲染路由。例如（请参见下面的链接），当应用程序加载时，如何呈现“路径：'/”的组件。目前，它们仅在我单击链接时加载

const路由器=新的VueRouter({
模式：“历史”，
路线：[
{路径：'/'，
//一条管线可以定义多个命名组件
//将被呈现为具有相应名称的s。
组成部分：{
默认值：Foo，
a:酒吧，
b:Baz
}
},
{
路径：'/other'，
组成部分：{
默认值：Baz，
a:酒吧，
b:福
}
}
]
})
新Vue({
路由器，
el:“#应用程序”
})

它可能不会在fiddle中发生，但当您在本地运行它时，您将在浏览器中输入say:

localhost:8080/

，这将仅呈现路径：/。好的，我刚刚计算出来。如果我从路由器中删除行模式：“历史”，则命名视图将在应用程序启动时加载。const router=new VueRouter（{mode:'history'，routes:[{path:'/'，

const router = new VueRouter({
mode: 'history',
routes: [
  { path: '/',
    // a single route can define multiple named components
    // which will be rendered into <router-view>s with corresponding names.
    components: {
    default: Foo,
    a: Bar,
    b: Baz
    }
  },
  {
     path: '/other',
     components: {
     default: Baz,
     a: Bar,
     b: Foo
     }
  }
  ]
})

new Vue({
router,
el: '#app'
})