关于模板字符串用于绑定url进行跳转时的模板字符串解析错误

关于模板字符串用于绑定url进行跳转时的模板字符串解析错误

 <navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id">

                    <image :src="item.image_src">image>
                navigator>

如图，没有被注释掉的navigator标签的url使用字符串的拼接是正确的，他发出的网络请求是：

但是如果我使用模板字符串，即注释掉那个，他发出的网络请求是：

注意看url，他是https://www.uinav.com/api/public/v1/goods/detail?goods_id=%24%7Bitem.goods_id%7D%EF%BC%8C
这是为什么呢？两种写法不是一样的吗？第一种是字符串的拼接，第二种是直接在模板字符串里面使用${}语法去读取变量，这是合法的呀，为什么会出现url错误的结果？

很明显，你没有使用模板字符串定义的格式 ``反引号，而是继续使用了字符串格式单引号

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/738699
• 除此之外, 这篇博客: 路由导航守卫控制访问权限( 如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面 )中的 路由导航守卫控制访问权限 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面
  在 router 下的 index.js 中 暴露 路由 之前 （ 在 export default router 之前挂载路由导航守卫 ）

  //  挂载路由导航守卫
  router.beforeEach((to, from, next) => {
    // to 将要访问的路径
    // from 代表从哪个路径跳转而来
    // next 是一个函数，表示放行
    // next() 放行   next('/login') 强制跳转
  
    // 如果用户访问的登录页，直接放行 
    if(to.path === 'login') return next()
    // 从 sessionStorage 中获取到 保存的 token 值 
    const tokenStr = window.sessionStorage.getItem('token')
    // 没有token，强制跳转到登录页 
    if(!tokenStr) return next('login')
    // 存在token 直接放行
    next()
  })
  

用 ``，而不是""