如何正确使用Vue上选项卡旁边的路由器视图来根据活动选项卡更改url？
Vue是一种流行的前端开发框架，它提供了一种简洁、高效的方式来构建用户界面。在Vue中，可以使用路由器来管理应用程序的不同视图，并根据活动选项卡更改URL。下面是如何正确使用Vue上选项卡旁边的路由器视图来实现这一目标的步骤：
- 首先，确保已经安装了Vue和Vue Router。可以通过以下命令来安装它们：
npm install vue vue-router- 在Vue应用程序的入口文件中，导入Vue和Vue Router，并创建一个新的Vue实例。同时，创建一个路由器实例并将其与Vue实例关联起来。示例代码如下：
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes: [
// 定义路由
{ path: '/tab1', component: Tab1Component },
{ path: '/tab2', component: Tab2Component },
{ path: '/tab3', component: Tab3Component },
],
});
new Vue({
router,
render: (h) => h(App),
}).$mount('#app');在上面的代码中，routes数组定义了不同选项卡对应的路由路径和组件。
- 在Vue应用程序的模板中，使用
<router-view>标签来显示当前活动选项卡对应的组件。示例代码如下：
<div id="app">
<router-link to="/tab1">Tab 1</router-link>
<router-link to="/tab2">Tab 2</router-link>
<router-link to="/tab3">Tab 3</router-link>
<router-view></router-view>
</div>在上面的代码中，<router-link>标签用于创建选项卡，并通过to属性指定对应的路由路径。
- 现在，当用户点击选项卡时，Vue Router会根据路由路径自动加载对应的组件，并将其显示在
<router-view>标签中。同时，URL也会根据选项卡的变化而更新。
这样，就可以通过Vue上选项卡旁边的路由器视图来根据活动选项卡更改URL了。
对于Vue的路由器视图，腾讯云提供了云服务器CVM、云数据库MySQL、云存储COS等产品来支持Vue应用程序的部署和运行。您可以通过腾讯云官方网站了解更多关于这些产品的详细信息和使用指南。
参考链接：
相关·内容
5回答
我正在使用Vue Material ，我想知道是否有一种使用选项卡实现Vue路由器的方法。
使用命名视图，我可以在每个选项卡中显示不同的路由器视图，但我想知道如何在每个活动选项卡中获得不同的路由。
示例：
单击Tab 1有路由"/“
单击Tab 2有路由"/user“
在浏览器中，如果我进入"/user“路由，我希望它显示与他们的路由视图激活的Tab #2，如果我编写主路由"/”我希望它显示带有其内容的Tab 1#。
浏览 12提问于2017-04-02得票数 2
回答已采纳
1回答
我用Webpack和Vue.js一起创建了一个大规模的网络应用程序.我遇到的问题如下：
我使用的是vue-路由器和主要应用程序模板的以下结构：
<customNav></customNav>
<router-view></router-view>
导航是一个文件组件，它在组件文件中定义了自己的样式。假设默认情况下它有一个黑色的背景。现在，在单个情况下(当通过路由器显示不同的视图时)，我希望它是透明的。
我想我可能只是在路由器视图组件中覆盖CSS，但这不起作用，因为Webpack正在捆绑我导入的所有组件的CSS，并且我必须导入main.js中的所有
浏览 3提问于2016-11-29得票数 2
回答已采纳
如何与vue-路由器一起更改Vuetify选项卡
我使用虚拟标签和路由器参见。
在此示例中，存在两个子组件Foo和Bar。
我想更改活动选项卡和路由从Foo或Bar组件。这是一个简化的例子。我有标准的Vue结构(main.js，App.vue，Foo.Vue，Bar.vue)
我只能通过this.$router.replace更改路由器
谢谢。
JS
const Foo = {
template: '<div>Foo component!</div>'
};
const Bar = {
template: '<div>Bar
浏览 0提问于2019-07-15得票数 0
回答已采纳
1回答
用Vue.js编写一个chrome扩展，我需要根据用户操作更改视图。
通常情况下，我会用Vue路由器来神奇地抽象出所有这些逻辑.但是，路由器被绑定到URL。
有可能以任何方式改变这种行为吗？
也就是说，<router-view/>和往常一样在App.vue中，但是当用户通过扩展单击时，路由器并不是在浏览器地址栏中监视URL，而是选择其他对象吗？
浏览 4提问于2021-02-20得票数 1
回答已采纳
2回答
我将vuesax [ ]用于制表符。在vs-选项卡中，我有多个路由器视图。我希望呼叫显示不同的vue模板文件，为尊重的标签路由器-视图。
这是app.vue代码。
<template>
<div id="app">
<div class="">
<h3 style="color: #0DB26B;">
home <mark class="red">New</mark> Design
</h3>
<vs-ta
浏览 1提问于2019-07-23得票数 2
回答已采纳
1回答
我正在使用laravel-vue项目，我想将基本url从laravel视图传递到vue路由器组件。例如。此数据{{ url('/') }}。这可以在vue路由器上传递吗？
浏览 10提问于2020-04-10得票数 0
回答已采纳
刚开始使用vue路由器。基本上，每当我单击路由器链接时，URL都会更改，但是除非我刷新浏览器，否则路由器视图不会更改正在呈现的组件。
这是我的密码。
<div id="app">
<router-link to="/" exact>Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
浏览 2提问于2019-11-28得票数 3
回答已采纳
在我的vue SPA中，我有这样一个简单的路由器：
{path: '/page/:userId', name: 'user', component: user},
这意味着像这样的url显示组件用户具有关于用户1的内容。
如果在同一页上，我有一些链接
<vue-link :to="{name:'user', params={userId:3}}">
路由器只更新，但是更新内容页(因为它假设页面与我所在的位置相同)
我的用户内容使用数据和手表中的url参数加载数据。
数据
userId: this.$route.p
浏览 0提问于2019-08-27得票数 1
回答已采纳
我目前正在为CMS (Joomla)构建一个模块--这个模块的前端是用VUE 3(包含)创建的。路由器。原型已经在工作，可以集成到CMS模块中。路由器也能工作。如果在VUE应用程序中单击链接，则显示相应的视图。但是，如果用户现在在VUE App的一个子页面上并刷新它(F5 / Ctrl + F5)，就找不到该页面--我想是因为它只存在于Vue路由器中。
到URL结构：
domain.tld <--这是Vue应用程序所在的位置。domain.tld/list-:id/ ITEM -:id <--这是项的URL
现在我知道它不是那样工作的，因为VUE服务器试图解释URL，而它不能解释，
浏览 3提问于2021-03-12得票数 0
回答已采纳
2回答
我是Vue.js的新手，遇到过这个问题。
我用App.vue编写了这段简单的代码
<div v-for="brand in response" v-bind:key="brand.BrandId">
<router-link v-bind:to="{name: 'brand', params: {brandId: brand.BrandId } }">
{{brand.Name}}
</router-link>
</div>
<router-vi
浏览 22提问于2020-02-04得票数 2
回答已采纳
3回答
我使用的是VueJS路由器，但是路由器没有加载组件。
我有About.vue和Contact.vue只需要测试标签-如下所示：
<template>
<div>
<h1>Contact page. Welcome baby!</h1>
</div>
</template>
这里是App.vue，有三个路由器链接和路由器视图.
<template>
<div>
<h1>Routing</h1>
<router-link to=&#
浏览 1提问于2017-09-01得票数 5
回答已采纳
我正在做一个vue.js/vue路由器项目(vue 3，vue-路由器4)。在这个项目中，我有一个幻灯片面板，您可以从不同的角度触发。在这个幻灯片面板上，有一个“关闭”按钮来关闭它。
为了提高面板打开时的移动体验，我想在您单击导航器的前一个按钮时关闭面板，而不是回到历史中。
从现在开始，我已经用router.beforeEach尝试了一些东西，并且我很接近于找到这样的解决方案：
router.beforeEach(async (to, from) => {
if(panel_is_visible) {
// if the panel is visible, close it
浏览 4提问于2022-04-02得票数 0
回答已采纳
我有一个单页面应用程序，它包含一个：
包含标题和菜单的导航组件路由器视图我希望在路由器视图中显示与路由器中的状态相对应的每个组件，以更新导航组件的标题。如何将参数从路由器视图中的组件传递到外部导航组件。
我使用的是vue 2.0
浏览 2提问于2016-11-21得票数 2
该导航系统的结构如下：
<router-link to="/">Dashboard</router-link>
<router-link to="/travels">Travels</router-link>
...
“旅行”包含如下所有旅行地点的列表：
<div v-for="travel of travels" :key="travel.id">
<router-link :to="{name: 'Travel.Detail', pa
浏览 6提问于2022-04-28得票数 0
我们在这里:我有一个登录视图。用户将登录。在他登录后，我将获得UserID并使用道具将其传递给下一个视图(组件)。
Login.Vue
.then(res => {if (res.status === 200){
console.log(res.data['id'])
this.$router.push({name:'Contact', params:{userID: res.data['id'] }}) }
})
Contacts.vue
export
浏览 6提问于2020-10-27得票数 0
回答已采纳
我在分支“added vuex-to-ssr”上运行以下示例应用程序
当我使用SSR运行示例应用程序时，当我转到主页或about页面时，会收到以下Vue Router警告。找不到有关警告的文档。任何帮助都将不胜感激。
Vue路由器警告:路径"/“与params一起传递，但它们将被忽略。改为使用参数旁边的命名路由。Vue路由器警告:传递了带参数的路径"/about“，但它们将被忽略。改为使用参数旁边的命名路由。
浏览 5提问于2021-07-19得票数 3
我使用的NuxtJS pages安装程序类似于以下内容：
./pages/about.vue
./pages/phones/index.vue
./pages/phones/details.vue
./pages/phones.vue
在./pages/phones.vue -file中，我使用一个<nuxt-child />组件在其中呈现./pages/phones/index.vue和./pages/phones/details.vue。就像这样：
文件：./pages/phones.vue
<nuxt-child />
在./pages/phones/detail
浏览 3提问于2021-01-12得票数 0
假设我有一个包含两张卡的用户视图，一张对问题不重要(UserProfilePhoto卡)，另一张(UserDetails卡)具有以下代码：
<VTabs>
<VTab>
Profile
</VTab>
<VTab>
Tasks
</VTab>
<VTab>
Messages
</VTab>
<VTabItem>
<Profile> // component
</VTabItem>
<VTabItem
浏览 11提问于2021-05-31得票数 0
每个选项卡都是一个视图，并且每个视图都已加载并处于活动状态。当用户通过单击x关闭选项卡时，视图将被销毁和删除。此外，可以使用不同的变量或id多次加载单个视图。考虑同一类型的多个文档。
视图是通过转到特定路由来创建的。
这可以通过创建自己的视图模型，添加视图集合，然后添加组件作为子视图来完成，但这会忽略浏览器历史记录。
在阅读之后，看起来唯一的方法就是创建你自己的路由器。虽然我对Aurelia并不陌生，但我对创建自己的路由器还没有足够的信心。
问题是如何维护浏览器历史记录并拥有多个活动视图。
浏览 1提问于2016-08-19得票数 1
我用Vue创建了一个具有不同视图/组件的应用程序。视图/组件必须按特定顺序运行(MainPage -> Step1 -> Step2 -> Step3 -> FinalPage ->MainPage.)。
在我学习Vue的过程中，我使用运行良好的v-if指令管理导航，因为没有URL，所以我能够在每个视图/组件中实现逻辑，如
//pseudocode in each view/component
checkConditionsToMoveOn ? moveToNextPae : showErrorWithModalAndStayOnPage;
变得更加专业，我实现了
浏览 3提问于2020-12-29得票数 2
回答已采纳
我正在学习vue js，我创建了一个管理页面，当我使用路由器视图时，我能够路由，但是当我尝试href或路由器链接时，我无法加载模板，因为url被更改了。
，这是我的main.js
import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import App from './App.vue'
import admin from "./componen
浏览 2提问于2017-07-29得票数 4
1回答
我有一个分裂的界面，就像您在下面的示例图像中看到的那样。在左边，您可以看到app.vue内容。在右边的路由器视图内容。在app.vue内容顶部的菜单栏中，您可以在不同的路由器链接之间切换，从而改变左侧的路由器视图。到目前一切尚好。
但现在的问题是:在我的app.vue中，有用户输入，它们存储在数据变量中。用户输入是app.vue内容的一部分，但在路由器视图中也是需要的。
我的当前版本将带有路由器链接参数的用户输入发送到路由器视图。问题是，在页面加载和当用户输入更改时，路由器视图上的数据被取消推荐。为了再次显示正确的数据，我必须触发路由器链接。
App.vue：
<te
浏览 0提问于2018-10-29得票数 2
回答已采纳
1回答
动态导入拆分代码，但不延迟加载
、、、、
我想将延迟加载引入Vue路由器，这样代码的某些部分将只在需要时加载。
我正在跟踪Vue路由器中延迟加载的正式文档：
因此，为了进行测试，我更改了在路由器文件中导入Vault模块的方式：
import Vue from 'vue';
import Router from 'vue-router';
// Containers
import Full from '@/containers/Full';
// Views
// TODO: views should be imported dynamically
import Dashboard f
浏览 0提问于2017-11-29得票数 3
在我的构建中，我可以通过路由器链接路由到每个组件，但不能通过菜单click() events。
在菜单模板中，我尝试通过以下方法更改路由：
win！.loadURL(“”)，用于ex，但在运行构建时，它只是变为空白(任何URL)。
另外，如果我导入路由器并尝试在主进程中使用router.push()，它最终会出现很多错误，而且也无法工作。
但是，如果我使用电子服务，而不是运行构建，它可以正常工作。虽然它从菜单中重新加载页面，但与路由器链接不同，通过这些链接，它保持在同一个页面上，并简单地更改路由组件。
我需要一个从菜单和路由器链接改变路由视图的构建。
那么，我如何从电子菜单中更改SPA的路径，
浏览 5提问于2020-10-22得票数 1
回答已采纳
我刚接触vue.js和I#m，现在正在练习路由。我的router.js看起来像这样：
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/'
浏览 0提问于2019-10-16得票数 1
1回答
我对Vue很陌生。我的应用程序有一个相当标准的布局，顶部导航，侧导航，页脚和内容区域。内容区域分为两部分，左边有一棵树，右边有一个选项卡式界面。我使用vue路由器和嵌套的动态路由。
TreeAndTab.vue
import Vue from 'vue'
import VueRouter from 'vue-router'
/* import DefaultLayout from '../layout/Default.vue' */
/* import TreeAndTabLayout from '../layout/TreeAndTab
浏览 6提问于2021-05-19得票数 0
回答已采纳
这和sounds...as一样混乱，似乎没有其他与强制更新vue应用程序相关的问题来回答(但很高兴被证明是错的)。
我有一个简单的页面利用一些jquery，这是加载一个第三方vuejs应用程序。第三方应用程序加载正确且工作正常。
问题是，如果在通过vue路由器工作的第三方应用程序中点击了一个链接。虽然我看到url随着正常的vue路由器功能而改变，但是视图/模板本身并没有更新/改变。
如果此时我调用了location.reload()，那么页面将重新加载并显示正确的模板。然而，这是非常慢的，我试图找出为什么视图在这些条件下不刷新。这显然与我通过外部脚本生成vueapp的事实有关，但无法确定问题是
浏览 2提问于2018-12-02得票数 0
我有一个列表/详细信息用例，其中用户可以双击产品列表中的项目，转到详细信息屏幕进行编辑，然后在完成编辑后返回到列表屏幕。我已经使用这里描述的动态组件技术做到了这一点：。但现在我计划在应用程序中的其他地方使用vue-router，我想重构它以使用路由。使用我的动态组件技术，我使用了keep-alive来确保当用户切换回列表视图时，会出现与编辑前相同的选择。但在我看来，通过路由，产品列表组件将被重新呈现，这不是我想要的。
现在，看起来路由器视图可以被包装在keep-alive中，这将解决一个问题，但会引入许多其他问题，因为我只想让该路由保持活动状态，而不是所有路由(目前我只使用一个顶级路由器视图)
浏览 65提问于2017-01-20得票数 32
我有一个Vue路由器设置与一个路径为'/‘的主页，然后我也分别有一个父模板，这是一个页眉和页脚。这位家长有孩子。我不想让父母有一条路，只有孩子。但是，当我在主页下面列出父级和子级并将路径保留为空白时，当导航到基本URL而不是主页时，父节点将加载。我做错了吗？
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
component: HeaderFooter,
children: [
{
path: '/category',
浏览 6提问于2022-09-03得票数 0
回答已采纳
我想在我的Angular2应用程序中使用语义UI。问题是，我找不到一个路由器设置来更改默认名称的“路由器-链接-活动”类。我需要它被称为“活动”，以使菜单正确显示。
据我所知，这种设置是不存在的。我在Vue.JS上看到过它，所以我希望它也在那里。让开发人员来解决这个问题是个好主意吗？
所以。我们需要编写一个自定义指令，将“活动”类添加到所有带有“路由器链接活动”类的DOM元素中，但我在这里也遇到了一些问题。
有一个，但答案太复杂了，对我没有用。因此，我阅读了一些文档，并决定做一些更好的事情：
commons.ts:
@Directive({
selector: '.router
浏览 0提问于2016-04-11得票数 6
回答已采纳
我正在使用Vue中的自定义选项卡组件实现嵌套选项卡视图。当我刷新或重新加载嵌套子选项卡的页面时，未显示任何活动选项卡。我的问题是，当页面为正确的活动子标签刷新/重新加载时，如何显示活动的父标签。为了更好地理解，我在这里提供了代码。 https://codesandbox.io/s/morning-leaf-zxlt7?file=/src/components/TabView.vue 为了说明更多，假设我在这里浏览到Operation选项卡下的Operation 2 ? 现在，当我刷新页面时，我得到了这个- ? 我需要单击父选项卡(操作选项卡)来查看活动子选项卡(操作2) 请帮
浏览 71提问于2020-04-29得票数 0
2回答
场景
我有一个使用vue.js 2.6和vue-router 3.0的应用程序
在这里，我有链接到像这样的详细页面
<div v-for="item in items">
<router-link :to="{name: 'details', params: {key: item.shortKey}}">
</div>
什么工作
现在，在目标视图中，参数总是有正确的值，而且当我第一次单击链接时，我在浏览器中看到了正确的短键。
不工作
现在，当我单击另一个项目时，我仍然可以在浏览器url中看到在浏览器中
浏览 1提问于2019-04-23得票数 1
1回答
使用Vue路由器可以支持两个基本URL、/test/app和/app吗？http请求还必须使用API调用的更新路径。
也许可以在vue路由器中使用别名来实现这一点。但这并不能解决vue资源的API调用问题。这意味着我必须为每一页创建2条路径。
浏览 2提问于2017-03-28得票数 1
回答已采纳
1回答
在我的Vue应用程序中，我有一个主要组件，其中包含以下路由器视图： <router-view></router-view>
<div class="modal">
<router-view name="modal"></router-view>
</div> 在多个地方，我想打开特定的路由器链接来打开一个模式。为了达到这个目的，我做了一条路线，如下所示： {
path: '/visitors/login',
props: true,
compon
浏览 18提问于2021-05-05得票数 0
1回答
我在一个项目中使用Vue.js和Vue路由器，并且每当路由到组件准备就绪时，我就尝试进行回调。通常在挂载()钩子中的每个组件中都会这样做，但在本例中，我希望对已路由到的每个组件都这样做。
我尝试过使用router.OnReady()和router.afterEach()，但是它们没有工作，因为它们是在路由之后，而是在组件挂载之前发生的。我还尝试更改vue-路由器源代码，将挂载()添加到路由器视图组件中，但没有被调用。
浏览 3提问于2018-01-04得票数 2
回答已采纳
我想使用url参数在我的Vue应用程序中设置变量。我认为vue路由器对此很有用，但它似乎都是为在路由器视图组件中显示/隐藏组件而设计的。
我正在考虑使用在路由器视图中没有模板的单个组件来设置如下变量：
export default new Router({
routes: [
{
path: '/preferences',
name: 'Preferences',
component: Navigator,
props: { preferencesVisible: true }
},
{
浏览 1提问于2018-11-26得票数 0
回答已采纳
2回答
我完全被困在使用vue.js 2.0和vue路由器通过路由器视图来渲染组件上。
我安装了vue devtools，我确实看到了router-view旁边的"fragment“标签，但没有其他详细信息。
需要注意的是，我使用的是laravel-elixir-vueify和browserify。
App.js
var Vue = require('Vue');
var VueRouter = require('vue-router');
import dashboard from './components/dashboard.vue'
浏览 1提问于2016-10-15得票数 0
我是Vue的新手，我正在构建一个带有侧边菜单的Vue应用程序，它可以让用户浏览网站。 我使用的是Vue Router，代码如下 <template>
<div id="app">
<Header />
<SideMenu
active="0"
/>
<router-view/>
</div>
</template> 当用户单击其中一个SideMenu链接时，它转到另一个路由，内容将在SideMenu旁边生成，而无需再次
浏览 18提问于2020-08-03得票数 2
回答已采纳
1回答
我的路线有问题。我有一个简单的点击处理程序推到路由器。
methods: {
page(path) {
this.$router.push(path);
}
}
这将显示正确的内容，但是URL 简要地返回到正确的，然后返回到前面的URL。我只是新出现的，因为当我单击'back‘浏览器按钮时，URL是正确的。
我打开控制台，决定测试路由器。
$vm0.$router.push('/my-path');
它不仅显示了正确的内容，而且URL也是正确的。
我现在很困惑如何进一步调试这个问题，所以如果有人有任何想法，请告诉我。
router.js
impo
浏览 4提问于2020-02-19得票数 2
回答已采纳
我使用Vue.observable()来管理状态，并且在vue-router加载大多数视图之前，需要等待两个存储属性被填充。 我尝试将加载放在beforeCreate中，在App.vue中创建并挂载生命周期事件，因为它是我的web应用的根： <template lang='pug'>
#app
AppHeader
router-view
AppFooter
</template>
<script lang="ts">
import { Component, Vue } from 'vue-propert
浏览 18提问于2019-05-14得票数 0
1回答
我正在路由器的导航保护程序中完成异步工作：
router.beforeEach((to, from, next) => {
somethingAsync().done(next)
})
路由器是否公开任何东西来告诉我它目前正在“加载”？还是我需要自己去追踪？现在，一旦异步工作完成，内容将在<router-view></router-view>中弹出。我的当前解决方案是跟踪Vuex存储中的活动工作，并在路由器视图旁边显示一个加载元素。
浏览 2提问于2017-08-01得票数 1
回答已采纳
我对vue js 2中的路由器链接组件有问题。
index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import HomeView from '../views/HomeView.vue';
import OrdersView from '../views/OrdersView.vue';
Vue.use(Router)
export default new Router({
routes: [
{
path: '
浏览 4提问于2022-09-09得票数 0
在重新加载单个页面应用程序时，我希望url正确加载，而不是抛出404错误。使用Laravel5.6，Vue.js 2.6，& MAMP。
我尝试了下面的代码，但是，基于URL是什么，我在相同的欢迎视图中加载不同的app.js文件。由于这种结构，此解决方案不起作用：
Route::get('/{vue_capture?}', function () {
return view('welcome', ['app_path' => 'load different vuejs apps here in my routes/w
浏览 0提问于2019-06-23得票数 0
嘿，所有人，我有一个vue CLI应用程序。 在开发模式下，我的url默认为： http://localhost:8080/#/ 如果我尝试执行http://localhost:8080/signin，它会重定向回http://localhost:8080/signin#/，但会显示我的'/'视图。 我的路由器文件如下所示： import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Signi
浏览 22提问于2019-09-23得票数 0
回答已采纳
1回答
main.js：
import Vue from 'vue';
import App from './App';
import router from './routes/Route';
Vue.config.productionTip = false;
new Vue({
el: '#app',
render: h => h(App),
router
})
Route.js：
import Vue from "vue";
import VueRouter from "vue-router
浏览 1提问于2018-12-27得票数 0
回答已采纳
1回答
我正在尝试从路由器获取一个子链接进行渲染，以便父路由保持活动状态。
这是我的路由器：
{
path: '/portfolio',
name: 'portfolio',
component: () => import('./views/Portfolio.vue'),
children: [
{
name: 'portfolioitems',
path: '/portf/:id',
component: () => import('./v
浏览 8提问于2019-07-27得票数 0
我正在创建一个SPA，它有一个登录屏幕和其他视图。但我面临的问题是，登录屏幕视图也包括在导航栏，但它不应该在那里。然后我使用了路由器导航，它单独显示导航栏，没有任何视图，我认为它也保护Login视图。
App.vue
<template>
<section id="app" class="hero">
<section class="main-content columns is-fullheight has-background-white-bis">
<Navigation
浏览 6提问于2019-12-19得票数 5
回答已采纳
2回答
我为用户提供了一些简单的CRUD页面(并使用Vuetify)。所以
list/users/:id将呈现用户配置文件
在路由器配置中设置嵌套路由之后，我将导航到这些嵌套路由，但我当前呈现的视图不会更新，尽管浏览器url会更新。复制步骤：
projectUpdate 创建一个新的Vue项目，Vue路由器将Vue添加到App.vue文件到
。
<template>
<v-app>
<router-view></router-view>
</v-app>
</template>
创建用户视图
。
<templ
浏览 7提问于2020-03-05得票数 2
回答已采纳
1回答
我是一个Vue初学者，我有一个问题:我有一个导航条，我想要一些链接(下面显示的“Link2”)来路由到相同的视图，但是每个链接的值都不同(1,2,3)，这样我就可以构建一个旋转木马，根据所选的选项进行更新。
我不想使用像link2/:opt，这样的路径，因为我不能刷新页面，只想将链接选项绑定到视图文件中的值.。
我试图通过在路由器中使用一个元标记来实现这一点，然后在导航栏中对每个选项单击这个元标记进行更新。我的问题是，我无法读取视图中元标记的变化。无论我选择什么选择，我总是得到Link2 - option1.
路由器/index.js
{
path: '/link2
浏览 2提问于2021-02-07得票数 1
回答已采纳
我试图实现的是将Vue 3应用程序添加到现有的Rails应用程序中。因此，我的应用程序将是一个典型的Rails应用程序，直到加载路由/spa/*。在这种情况下，Rails的控制器将提供一个依赖于Webpack服务JS的布局。
首先，我将路由/spa/添加到我的routes.rb中，以便始终将其解析为一个为使用javascript_pack_tag的正确布局服务的控制器。
然后，我成功地在我的Rails 5.2 rails应用程序中安装和安装了Webpacker，而且它似乎工作正常，因为我已经用Vue路由器构建了一个简单的应用程序，并在单击链接时正确地呈现了几个组件。好吧，几乎..。
问题在于我
浏览 2提问于2021-01-25得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
