Getting "The '+' operator cannot be applied to type 'symbol'." when trying to concatenate $route.name

Question

Trying to get the current route name within a template, to pass it on to a router link (i.e. passing the current route to the login view, so I can return users there after they authenticate).

It works as expected, but when doing a type check I get:

The '+' operator cannot be applied to type 'symbol'.  
   :to="'/signin/' + $route.name".  
                     ~~~~~~~~~~~

My code is simple enough:

<RouterLink
      v-if="!userState.signedIn"
      :to="'/signin/' + $route.name"
      >Sign in</RouterLink
    >

Is there a way for my to annotate my code or something so that Typescript will understand that $route.name is actually a string? Or maybe get the route name differently?

Following TJ Crowder advice in comments, I can convert/cast the property to a string using:

:to="'/signin/' + String($route.name)"

... but I guess that would fail if $router.name comes as a symbol. Can't find when the value would be a symbol instead of a string.

Answer 1

:to="`/signin/${$route.name}`”

Try writing it this way