vuejs-framework7 工具栏路由答案

【问题标题】：vuejs-framework7 toolbar routevuejs-framework7 工具栏路由
【发布时间】：2017-09-22 03:19:42
【问题描述】：

我正在开发一个使用 Framework7 和 vuejs 制作的应用程序。

我有底部工具栏，但这里有路由问题。

这是我的代码

route.js

{
path: '/about/',
component: require('./assets/vue/pages/about.vue')}

main.vue

<div class="toolbar tabbar tabbar-labels">
  <div class="toolbar-inner">
    <a class="item-link tab-link" href="/about/">
      <i class="fa fa-home"></i>
      <span class="tabbar-label">Home</span>
    </a>
  </div>
</div>

当我单击工具栏时，我收到错误无法获取 /about/。

但是当我从工具栏外部单击相同的链接时，它可以工作...

有人有任何想法或有更好的解决方案吗？

【问题讨论】：

这似乎应该可以工作。我会尝试在route.js 文件中的定义中为您的'/about/' 路由指定一个名称属性（如name: 'about',），然后使用router-link 标记通过<router-link :to="{ name: 'about' }"> 生成指向该命名路由的链接跨度>
缺少细节：vue 版本、vue-router 版本、framework7 版本。

标签： routes vue.js toolbar html-framework-7

【解决方案1】：

SPA项目是指所有页面都基于同一个uri，用'#'区分，例如：

所以所有页面都在uri'/'上，'/about' != '/#/about'

你应该使用<router-link to="/about">Go to About</router-link>或者使用js代码router.push({ path: 'about' })。

见vue-router

【讨论】：