router-view為什么沒有顯示視圖??

<div id="app">
        <h1>Hello</h1>
        <p>
            <!-- 使用router-link組件來導航,通過 to 指定鏈接 
            <router-link>默認會被渲染為一個<a>標簽
            -->
            <router-link to="/">首頁</router-link>
            <router-link to="/student">學生管理</router-link>          
            <router-link to="/teacher">講師管理</router-link>
        </p>
        <!-- 路由出口,路由匹配的組件渲染到這里 -->
        <router-view></router-view> 
    </div>
     

 <!-- 生產環境版本，優化了尺寸和速度 -->
<script src="vue.js"></script>
<script src="vue-router.js"></script> 

<script>
    // 1.定義路由組件,可以從其他文件 import進入    
    const Student = { template: '<div>學生-頁</div>'}
    const Teacher = { template: '<div>教師-頁</div>'}
    const Welcome = { template: '<div>歡迎-頁</div>'}
    
    
    

    //2.定義路由,每個路由應該映射一個組件
    const routes = [
        //設置默認指向路徑
        {path:'/',redirect:'/welcome'},
        {path:'/welcome', component:Welcome},
        {path:'/teacher', component:Teacher},
        {path:'/student', component:Student}
        
    ]
    

    //3.創建router實例,傳入`router`配置
    const router = new VueRouter({
        //簡寫為 routers相當於routers:routers
        routes
    })

    //4.創建和掛載實例,使應用具有路由功能
    const vm =new Vue({
        el:'#app',
        router
    })
       
    
</script>

在剛開始學習Vue的路由的時候,我寫了一個簡單的路由跳轉,跳轉沒有問題但是沒有顯示跳轉后對應的視圖,於是我在網上找了下原因,也是讓我很無語,問題居然是

第二步中的const變量只能叫 routes !!! 不能自定義