Javascript 将Vuejs与Codeigniter 3集成

我想合并Codeigniter3和vuejs。我已将路由器与菜单链接连接起来。在模板中，我找不到显示页面的确切路线。 这里是风景

    //It's a view file that's I want to open
    <template>
    <div>
    <?php
    $role = get_user_role();
    if ($role == "admin") {
    ?>
    <div class="row">
     <div class="col-md-4"> 
        <div class="form-group">
            <label for="Teachers">Teachers</label>
             <select class="form-control select2 " id="teachers_availablility_select" style="border: 2px solid #000;">
    <option class="ml0">Select Teacher</option>
        <?php
        foreach ($teachers as $key => $value) 
            {
            echo "<option value='".$value->id."'>".$value->full_name."</option>";
            }
        ?>
        </select>
        </div>
        </div>
    </div>
        <?php
        } 
        ?>
        <div id="teachers_availablility_calendar"></div>
        <div>
            <button class="btn btn-primary inc-width btn-lg" id="save_availability">
            <?php echo $this->lang->line('save'); ?>
            </button>
        </div>
    </div>
    </template>
    <script>
        export default {
        name: 'view_availibility',
         data () {
              return {    
              }
            },  
          }
    </script>

//这是我要打开的视图文件
教师
选择教师
const view_availibility = '/Availability'; 
    import  view_availibility from './views/availability/view_availibility';
    const Foo = { template: 'views/availability/view_availibilities.php' }
    const Bar = { template: 'bar' }
    const routes = [
      { path: '/foo', component: Foo },
      { path: '/bar', component: Bar }
    ]
    const router = new VueRouter({
      routes
    })
    var v = new Vue({
       el:'#app',
       vuetify: new Vuetify(),
      router,
        data:{
          admins: [
           { title: 'Dashboard',link: 'Foo' },
            { title: 'Availability',link: 'bar' },
            ],