我想要实现的是将 Vue 3 应用程序添加到现有的 Rails 应用程序中。因此,在加载路由
首先,我在
然后,我已经成功地安装和设置了Webpacker在我的
问题在于我将Vue应用程序提供在路径
我想要实现的是告诉Webpack(er)和Vue在任何Vue路由链接之前添加
根据Vue 3文档,通过在路由配置中添加
我还在某处发现,使用Webpack和Vue可以通过在
问题是: 当调用路由
最终编辑
跳转至@Excalibaard的答案 :)
在我的情况下,问题在于我正在使用Vue router v4,其语法与搜索路由器文档时通常看到的语法不同。
在v3路由器中,
在v4中,
所以,在我的情况下,解决方案将是:
/spa/*
之前,我的应用程序将是一个典型的Rails应用程序。在这种情况下,Rails的控制器将提供一个依赖于Webpack服务JS的布局...首先,我在
routes.rb
中添加了路由/spa/
,以便始终将其解析为一个控制器,该控制器提供使用javascript_pack_tag
的正确布局。然后,我已经成功地安装和设置了Webpacker在我的
Rails 5.2
应用程序中,并且似乎它正在正常工作,因为我已经建立了一个简单的应用程序,其中包括Vue路由和一些组件,当单击链接时正确呈现。好吧,几乎...问题在于我将Vue应用程序提供在路径
/spa/
下而不是根目录/
下。当我加载/spa/
URL时,显示我的标题组件(保存链接),但初始组件(Vue路由中的组件)未呈现,直到我单击Vue链接。组件被呈现,但URL从/spa/
变为/q1
。显然,如果我们重新加载浏览器,则该路由不受Vue而受Rails控制。我想要实现的是告诉Webpack(er)和Vue在任何Vue路由链接之前添加
/spa/
。<nav id="nav">
<router-link to="/">Question 1</router-link>
<router-link to="/q2">Question 2</router-link>
</nav>
我知道我可以在每个链接中硬编码/spa
,但那感觉很不舒服:D
我的Vue路由器:
import { createWebHistory, createRouter } from "vue-router";
import Question1 from "@/vue/views/Question1.vue";
import Question2 from "@/vue/views/Question2.vue";
// import About from "@/views/About.vue";
const routes = [
{
path: "q1",
name: "Question1",
component: Question1,
},
{
path: "q3",
name: "Question2",
component: Question2,
},
{
path: "",
redirect: { name: 'Question1' }
}
];
const router = createRouter({
history: createWebHistory(),
// publicPath: '/spa',
base: '/spa/',
routes,
});
export default router;
根据Vue 3文档,通过在路由配置中添加
base
参数可以很容易地解决这个问题,但是它没有起作用 :/,publicPath
也是如此。我还在某处发现,使用Webpack和Vue可以通过在
vue.config.js
中添加路径来解决此问题,但是使用Webpacker gem时,我不确定该怎么做。问题是: 当调用路由
/spa/
时,如何使我的Vue应用程序的行为就像不存在/spa/
一样?最终编辑
跳转至@Excalibaard的答案 :)
在我的情况下,问题在于我正在使用Vue router v4,其语法与搜索路由器文档时通常看到的语法不同。
在v3路由器中,
base:
是传递给createRouter()
函数的对象的属性。在v4中,
base
是传递给createWebHistory("the-base-value")
的参数。所以,在我的情况下,解决方案将是:
const router = createRouter({
mode:history,
history: createWebHistory( '/spa/' ),
routes,
});