我有一个非登录用户无法访问的组件。我将这个逻辑实现到beforeCreate钩子中。问题是，这并不能阻止组件继续加载，而这正是我想要的。
这是我的代码：
<script>
export default {
beforeCreate: function () {
if (this.$root.auth.user === null) {
this.$router.push({ name: 'auth.login' })
}
},
mounted: function () {
// some code that SHOULD NOT be processed
// if the user isn't authenticated
}
}
</script>
我究竟做错了什么？
I have a nav bar structured as follows:
<template>
<div>
<div>
<ul>
<li>
<a href = "#contact">Contact</a>
</li>
<li>
<a href = "#toAbout" >About</a>
</li>
<li>
<a href = "#toProperties">Properties</a>
</li>
<li>
<a href = "#toHome">Home</a>
</li>
</ul>
</div>
<div style="height: 1000px">
</div>
<p id="contact">
Contact
</p>
<p id="toAbout">
About
</p>
<p id="toProperties">
Properties
</p>
<p id="toHome">
Home
</p>
</div>
</template>
<script>
</script>
<style>
</style>
如果我在 Chrome 中单击锚点，它工作得很好，但 FF/Safari 需要双击（第一次单击将 URL 更改为 /home#id，第二次单击将它们带到 id。
基本 HTML ( https://jsfiddle.net/370bvmb5/1/ )的小提琴正在工作，所以我猜这是一个 Vue-Router …
project_id我正在尝试使用 vue-router 从地址栏调用一个变量。我已经像这样初始化了路由器：
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
Vue.config.productionTip = false
Vue.use(VueRouter)
/* eslint-disable no-new */
const router = new VueRouter({
routes: [
{ path: '/project/:project_id', component: App }
]
})
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
this.$route.params.project_id并尝试从我的 App.vue 组件内访问：
<template>
<div id="app">
<img src="./assets/logo.png">
<div id="center_bar">
oh: {{this.$route.params.project_id}}
</div>
</div>
</template>
<script>
import ProjectList from './components/ProjectList'
import ProjectAboutBox from './components/ProjectAboutBox'
export default {
name: …我正在尝试使用 laravel 和 vue 创建一个 SPA。还安装了 Voyager 用于管理目的。Voyager 是http://localhost:8000/admin ..，它使用 laravel web 路由。
现在无法访问它我正在使用 Vue Router 作为我的路线：我的家乡路线示例 (vue) http://localhost:8000/home
应用程序.js
...
import VueRouter from 'vue-router';
import App from './components/App.vue';
import Home from './components/Home.vue';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/home',
name: 'home',
component: Home
},
],
});
const app = new Vue({
el: '#app',
components: { App },
router,
});
应用程序.vue
<template>
<div>
<h1>Vue Router Demo App</h1>
<p>
<router-link :to="{ name: 'home' }">Home</router-link> …我是 vuejs 新手。对于我的 Vuejs 应用程序，在运行“npm run build”后，我无法访问 Web 托管服务器中的“/foo/apple”等 url。它显示错误 404 我正在使用 HTML5 历史模式（https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations）并且我实现了“connect-history-api- dev-server.js 中的后备”如下所示：
const express = require('express')
const app = express()
app.use(require('connect-history-api-fallback')())
我的路由器/index.js
export default new Router({
mode: 'history',
{
path: '/Product',
name: 'Product',
component: Product,
},
{
path: '/Product/kraftbag',
name: 'Kraftbag',
component: Kraftbag
},
});
我的网站http://americandunnage.n55lwi.info/。我查了很多关于这个问题的帖子，但仍然可以找到解决方案。
我正在使用具有历史模式的 Vue 路由器。在按钮上单击当前页面，我将其路由到下一页。在第二页上，当我重新加载时，我收到 404。有没有办法在 Vue 中处理这个问题并将其重定向到主页。
export default new Router({
mode: "history",
routes: [
{
path: "/",
name: "first",
component: First
},
{
path: "/abc",
name: "abc",
component: Second,
props: true
},
我想从以下 URL http://localhost:8081/#/scenarios/SCNRF3SZ2FS54E66B456转到此 URL http://localhost:8081/#/scenarios/SCNRF3XAPLPJ241807A9。但它不起作用，代码如下：
export default new Router({
mode: 'hash',
linkActiveClass: 'open active',
scrollBehavior: () => ({ y: 0 }),
routes: [
{
path: '/',
redirect: '/scenarios/:id',
component: Full,
beforeEnter: beforeEnter,
children: [{
path: '/scenarios/:id',
name: 'Scenario',
component: Scenario
}]
}
]
})
我该如何让它发挥作用？
我有一个导航流程，其中包括
SearchPage -> ...Others or SearchPage -> ...Others or SearchPage ->
并希望在返回时保留搜索字符串。
<template id="ListCustomersPage">
<q-layout>
<q-layout-header>
<toolbar :title="title" :action="doCreate" label="New"></toolbar>
<q-search inverted placeholder="Type Name, Code, Nit, Phone Number or Email" float-label="Search" v-model="search" />
<q-btn icon="search" color="secondary" @click="doSearch" />
</q-layout-header>
</q-layout>
</template>
现在的问题是，当用户可以导航到其他地方时，如何将查询堆栈与路由器之一关联起来。
PD 全部位于一个页面中。如果可能的话，保留屏幕而不刷新它们（但仅适用于搜索页面，直到弹出回来）会更好。
我正在尝试使用 vue js 开发一个简单的网站，到目前为止一切顺利，但我面临以下问题：
我正在使用路由器来更改页面，它可以工作，但我需要做的是：更改页面并滚动到特定锚点。
我已经尝试过的：
效果很好：路由到联系页面或主页
<router-link to="/contact">Contact</router-link>
<router-link to="/">Home</router-link>
不起作用：
<router-link :to="{ name: '/', hash: '#technology' }" >Technology</router-link>
最后一个仅在我位于主页时才有效，但每当我更改为“联系页面”并尝试路由到“/#technology”时，它就不起作用。它确实尝试路由到“ http://example.com/contact/#technology ”而不是“ http://example.com/#technology ”。
如果我这样做，它只会滚动到顶部，但不会滚动到锚点：
<router-link to="/#technology" Technology</router-link>
我的路由器代码：
const routes = [
{ path: '/', component: Home },
{ path: '/contact', component: Contact }
]
const router = new VueRouter({
mode: 'history',
routes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
}
if (to.hash) {
return { selector: to.hash };
}
return { x: 0, y: 0 …我为我的应用程序创建了一个自定义组件来选择产品的多个图像：
<template>
<!-- Image modal -->
<div
class="modal fade"
id="gallery-multi"
tabindex="-1"
role="dialog"
aria-labelledby="galleryLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered modal-lg " role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="gallery">Gallery</h5>
<button type="button" class="close" @click="closeModal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<vue-select-image
:dataImages="dataImages"
:is-multiple="true"
@onselectmultipleimage="onSelectMultipleImage"
:h="'90'"
:w="'140'"
></vue-select-image>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" @click="closeModal()">Close</button>
</div>
</div>
</div>
</div>
</template>
<script>
import VueSelectImage from "vue-select-image";
import "vue-select-image/dist/vue-select-image.css";
export default {
name: "selectMultiImg",
data() {
return {
multiID:[],
dataImages: [
{
id: …