title: How To Fix `TypeError: Cannot read property 'resolve' of undefined` in Router Link?
body: <p>I was working on my homework which I've got a problem in using <code>Router-Link</code>. I'm currently using <code>VueSax</code> Tables for SPA I'm working on it, and In all tables, there's not any problem with <code>RouterLink</code> but in one page i used Expanded Table of <code>Vuesax</code> which make table expandable when i click on it and show some data. Now what I'm trying to do is that i have a Lecture Table which every Record got some lessons and when i click on a lecture in table, table will expand and show lessons in expanded part and show links to lessons, but I'm keep getting <code>TypeError: Cannot read property 'resolve' of undefined</code> in my console and links not working.</p>
  
  <p>Here's the Component : </p>
  
  <pre><code>&lt;vs-table :data="course.lectures"&gt;
      &lt;template slot="thead"&gt;
          &lt;vs-th&gt;
              id
          &lt;/vs-th&gt;
          &lt;vs-th&gt;
              Lecture Name
          &lt;/vs-th&gt;
          &lt;vs-th&gt;
              Published At
          &lt;/vs-th&gt;
          &lt;vs-th&gt;
              Operations
          &lt;/vs-th&gt;
      &lt;/template&gt;
      &lt;template slot-scope="{data}"&gt;
          &lt;vs-tr :key="indextr.path" v-for="(tr, indextr) in data" &gt;
              &lt;vs-td :data="data[indextr].id"&gt;
                  {{data[indextr].id}}
              &lt;/vs-td&gt;
  
              &lt;vs-td :data="data[indextr].name"&gt;
                  {{data[indextr].name}}
              &lt;/vs-td&gt;
              &lt;vs-td :data="data[indextr].created_at"&gt;
                  {{data[indextr].created_at | myDate}}
              &lt;/vs-td&gt;
              &lt;vs-td :data="data[indextr].id"&gt;
                  &lt;vs-button @click.prevent="deleteLecture(data[indextr].slug)" style="float:right" radius color="danger" type="flat" icon="delete"&gt;&lt;/vs-button&gt;
                  &lt;vs-button @click="createLessonPop=true" style="float:right" radius color="success" type="flat" icon="add"&gt;&lt;/vs-button&gt;
              &lt;/vs-td&gt;
              &lt;template slot="expand"&gt;
  
                  &lt;div class="app_lessons"
                       v-for="lessonz in data[indextr].lessons"
                       :key="lessonz.id"&gt;
                      &lt;div style="display: block;width: 100%"&gt;
  
                          &lt;p&gt; lesson : {{lessonz.name}}
                              &lt;router-link
                                      :to='lessonz.pathzz'
                              &gt;  &lt;/router-link&gt;
                          &lt;/p&gt;
  
                      &lt;/div&gt;
                      &lt;div style="display: block;width: 100%"&gt;
                          &lt;p&gt; desc : {{lessonz.description}}&lt;/p&gt;
                          &lt;p&gt; path : {{lessonz.pathzz}}&lt;/p&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/template&gt;
          &lt;/vs-tr&gt;
      &lt;/template&gt;
  &lt;/vs-table&gt;
  </code></pre>
  
  <p>So as u can see I've put <code>lessonz.pathzz</code> 2 times, first one in router link to , and second time is in p tag to test if I'm getting link or not, which it's working, everything is working except router link.</p>
  
  <p>I also searched about it and I've got some solutions which it was related to app.js, but this method of using router for me was working for all my Homeworks.</p>
  
  <p>app.js :</p>
  
  <pre><code>import router from './Router/router.js'
  
  const app = new Vue({
   el: '#app',
   router
  });
  </code></pre>
  
  <p>router.js :</p>
  
  <pre><code>import Vue from 'vue'
  import VueRouter from 'vue-router'
  
  Vue.use(VueRouter)
  
  import AppCoursesInstructorLectureView from '../components/views/instructor/courses/lectures/view-lecture'
  import AppCoursesInstructorLessonView from '../components/views/instructor/courses/view-lesson'
  
  const routes = [
    // Instructor Section
    //     // Course Section
    { path: '/clientside/instructor/courses/:course/lectures/:slug', component: AppCoursesInstructorLectureView , name:'view-lecture-instructor'},
  
    { path: '/clientside/instructor/courses/:course/lectures/:slug/lessons/:lesson', component: AppCoursesInstructorLessonView , name:'view-lesson-instructor'},
  
  ]
  
  const router = new VueRouter(
  {
      routes,
      hashbang : false,
      mode : 'history'
  }
  )
  
  export default router
  </code></pre>
  
  <p>I've tried, 1.Suggestions on app.js </p>
  
  <ol start="2">
  <li><p>Updated Vue Router</p></li>
  <li><p>tried to put my router link in template part of expanded table.</p></li>
  <li><p>check api to see if path is working which it was working, and as i said in top i printed in a p tag.</p></li>
  </ol>
  
  <p>I'm also using Laravel as Back-end and i'm using resource for my api which data will be received like this:</p>
  
  <p>data->courses->lectures</p>
  
  <p>data->courses->lectures->lessons</p>
  
  <p>Vuesax Table : <a href="https://lusaxweb.github.io/vuesax/components/table.html#multiple-selected" rel="nofollow noreferrer">https://lusaxweb.github.io/vuesax/components/table.html#multiple-selected</a></p>