title: Can I create name of router variable when calling router.push
body: <p>I have the following code, but unfortunately not working as aspected. What is the best approach to get it working? If I console.log(currentPath) it shows 'sales'. Which is good. But If I use it in <code>saveComponent</code> it shows the following error:</p>
  <pre><code>src/components/modals/CreateSales.vue:198:21
  TS2322: Type 'string | symbol | null | undefined' is not assignable to type 'string | symbol | undefined'.
    Type 'null' is not assignable to type 'string | symbol | undefined'.
      196 |           changed.value = false;
      197 |        
    &gt; 198 |       router.push({ name: currentPath.value, params: { uid: '10'} });
          |                     ^^^^
      199 |
      200 |           });
      201 |       }
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>const currentPath = computed(() =&gt; {
    return route.name
  });
  
  const saveComponent = () =&gt; {
      if (submitButton.value) {
      // Activate indicator
      submitButton.value.setAttribute(&quot;data-indicator&quot;, &quot;on&quot;);
  
      store.dispatch(Actions.CREATE_SALE, form.value).then(() =&gt; {
        submitButton.value?.removeAttribute(&quot;data-indicator&quot;);
        changed.value = false;
       router.push({ name: currentPath.value, params: { uid: '10'} });
        });
    }
  };
  </code></pre>
  <p>Route.vue</p>
  <pre><code>const routes: Array&lt;RouteRecordRaw&gt; = [
    {
      path: &quot;/&quot;,
      redirect: &quot;/dashboard&quot;,
      component: () =&gt; import(&quot;@/layout/Layout.vue&quot;),
      children: [
        {
          path: &quot;/dashboard&quot;,
          name: &quot;dashboard&quot;,
          component: () =&gt; import(&quot;@/views/Dashboard.vue&quot;)
        },
        {
          path: &quot;/sales&quot;,
          name: &quot;sales&quot;,
          component: () =&gt; import(&quot;@/views/sales/Sales.vue&quot;),
        },
  {
          path: '/sales/:uid',
          component: () =&gt; import(&quot;@/views/sales/Sale.vue&quot;),
          children: [
            {
              path: &quot;general&quot;,
              name: &quot;general&quot;,
              component: () =&gt; import(&quot;@/views/sales/sub/General.vue&quot;),
              alias: ['']
            },
            {
              path: &quot;relation&quot;,
              name: &quot;relation&quot;,
              component: () =&gt; import(&quot;@/views/sales/sub/General.vue&quot;), 
            },
            {
              path: &quot;salelines&quot;,
              name: &quot;salelines&quot;,
              component: () =&gt; import(&quot;@/views/sales/sub/General.vue&quot;), 
            },
            {
              path: &quot;invoices&quot;,
              name: &quot;invoices&quot;,
              component: () =&gt; import(&quot;@/views/sales/sub/General.vue&quot;), 
            },
            {
              path: &quot;transactions&quot;,
              name: &quot;transactions&quot;,
              component: () =&gt; import(&quot;@/views/sales/sub/General.vue&quot;), 
            }
          ],
        },
     }
  ]
  </code></pre>