例如:在做系統時，主頁面有兩個功能【home】and【news】,在【home】下又分為登入和註冊。

首先需要將各種模板進行抽離。定義模板

<template id="home">  //home模板，裡面含子視口
    <div>
        <router-link to="/home/login">登入</router-link>
        <router-link to="/home/zhuce">註冊</router-link>

        <router-view></router-view
 
>
    </div>
</template>
<template id="news"> //訊息模板
    <div>news</div>
</template>
<template id="login"> //home模板下的登入
    <div>this is login</div>
</template>

<template id="zhuce"> //home模板下的註冊
    <div>this is zhuce</div>
</template
 
>

JS下配置路由

    const home={template:"#home"};
    const news={template:'#news'};
    const login={template:'#login'};
    const zhuce={template:'#zhuce'};

  var rout=[
      {path:'/',redirect:'/home'}, //重定向為home ，當html後面雜湊值為空時，預設顯示home
      {
      path:'/home',
      component:home, //模板註冊
      redirect:'/home/login'
 
,//子視口的重定向 預設登入
      children:[
          {path:'/home/login',component:login},  //配置子模板
          {path:'/home/zhuce',component:zhuce}
      ]},
      {path:'/news',component:news}
  ];

    var router=new VueRouter({     //例項化一個vuerouter
        routes:rout
    });

    const app = new Vue({
        router
    }).$mount('#app')

當Vue例項沒有el屬性時，則該例項尚沒有掛載到某個dom中；

假如需要延遲掛載，可以在之後手動呼叫vm.$mount()方法來掛載。