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 !!! 不能自定义

router-view为什么没有显示视图?

原文：https://www.cnblogs.com/jiehao-yu/p/14682918.html