我正在使用Vue 2.0-rc.6(目前最新)和Vue-router 2.0-rc.5(目前最新).
我尝试在我this.$emit('custom-event')的一个路由器组件中,this.$on('custom-event', () => { console.log('I heard an event') })在我的Vue实例中,但事件没有被监听.路由器组件本身正在听取事件但不是Vue实例.
任何的想法？
看看这个jsfiddle.
我用这个
this.$root.$router.push({
path: '/dashboard',
params: { errors: 'error' },
query: { test: 'test' }
})
在我的组件中,当发生一些错误时重定向到其他URL.问题是,当我想访问params仪表板组件中的字段时,它是空的.该query领域运作良好.我正试图通过它来访问它this.$route.params.errors.
我有一个Vue.js应用程序,并运行Amazon S3和Cloudflare.
当我打开索引并浏览到/ dashboard时,一切正常.但是当我在新选项卡中直接打开仪表板之类的路径或刷新页面时,我从S3收到以下错误:
404 Not Found
Code: NoSuchKey
Message: The specified key does not exist.
Key: unternehmen
RequestId: 6514F8A1F4C29235
HostId: +BVrPLJSGdzSYogzWZ4GMBXkgkdSJWRVJVhcSs4EI/lmMUR422aCtCxpBGU6AMe5VkS1UbEn/Lc=
刚看到问题是Vue.js历史模式:https://router.vuejs.org/de/essentials/history-mode.html
我想在我的Amazon S3 Bucket中使用路由规则解决问题.Apache RewriteRule如何寻找S3？
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
尝试以下但它不起作用:
<RoutingRules>
<RoutingRule>
<Condition>
<HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
</Condition>
<Redirect>
<HostName>domain.com</HostName>
<ReplaceKeyWith>index.html</ReplaceKeyWith>
</Redirect>
</RoutingRule>
</RoutingRules>
如果我这样做,我只是让我的页眉和页脚呈现,但仅此而已.
谢谢!
我很难用Vue-Router传递道具.当我将它们带入下一个视图时,我似乎无法访问道具.这是我的方法对象:
methods: {
submitForm() {
let self = this;
axios({
method: 'post',
url: url_here,
data:{
email: this.email,
password: this.password
},
headers: {
'Content-type': 'application/x-www-form-urlencoded; charset=utf-8'
}
}).then(function(response) {
self.userInfo = response.data;
self.$router.push({name: 'reading-comprehension', props: {GUID:self.userInfo.uniqueID }});
})
}
}
post请求正在运行,但当我尝试路由到一个新组件并传入一个props来访问下一个组件时,它说,
属性或方法"guid"未在实例上定义,但在呈现期间引用.确保在数据选项中声明反应数据属性.
顺便说一句,我路由到的组件看起来像这样:
<template lang="html">
<div class="grid-container" id="read-comp">
<div class="row">
<h1>Make a sentence:</h1>
{{ GUID }}
</div>
</div>
</template>
<script>
export default {
data(){
return {
props: ['GUID'],
}
}
}
我正在构建一个带有Vue.js 2的管理页面,我想阻止未经身份验证的用户访问该/admin路由并将其重定向到/login.为此,我beforeRouteEnter在Admin组件中使用了In-Component Guard ,如下所示
...
beforeRouteEnter(to, from, next) {
if(userNotLogedIn) {
this.$router.push('/login');
}
}
这里的问题this是没有在beforeRouteEnter钩子中定义.那么$router在这种情况下,访问和重定向到不同URL 的正确方法是什么？
我有应用程序，用户可以在其中以不同的角色登录，例如。seller，buyer和admin。对于每个用户，我想在同一路径上显示仪表板页面，例如。http://localhost:8080/dashboard
但是，每个用户都会在不同的 vue 组件中定义不同的仪表板，例如。SellerDashboard，BuyerDashboard和AdminDashboard。
所以基本上，当用户打开http://localhost:8080/dashboardvue 应用程序时，应该根据用户角色（我存储在 vuex 中）加载不同的组件。同样，我想将它用于其他路线。例如，当用户进入个人资料页面时，http://localhost:8080/profile应用程序应根据登录用户显示不同的个人资料组件。
所以我希望所有用户角色都有相同的路线，而不是每个用户角色都有不同的路线，例如。我不希望用户角色将被包含在URL类似以下内容：http://localhost:8080/admin/profile和http://localhost:8080/seller/profile等...
如何使用 vue 路由器实现此场景？
我尝试使用子路由和每条路由保护的组合beforeEnter来解析基于用户角色的路由。这是一个代码示例：
在router.js 中：
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import store from '@/store'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home,
beforeEnter: (to, from, next) => {
next({ name: store.state.userRole })
},
children: …我对Firebase的一些行为感到有些困惑.我从未使用旧版本,但我相信getRedirectResult是新的,因为他们与Google合作.
我有一个SPA,我正在使用Vue.js与vue-router和Firebase for.有一个登录页面,然后是另一个用户可以登录或不登录的视图.登录由重定向完成.加载第二个视图时,我在vue-router'activate'钩子中检查getRedirectResult,如果有用户,请用其他信息做一些其他事情.
问题就这样进行:
1.我们在第二页.用户登录.调用getRedirectResult并查找用户.好极了.
2.用户注销.我们回到了登陆页面.
3.我们点击一个按钮,将我们引导至第二页.调用getRedirectResult并查找以前的用户.什么？!没有!
我找不到任何关于我是否遗漏某些内容并需要某种额外检查的内容,或者以某种方式在注销后强行刷新页面,以便忘记最后一个用户登录,或者这是否会被视为错误.任何帮助将不胜感激!
在vue组件路由器'activate'钩子的第二页上调用getRedirectResult:
firebase.auth().getRedirectResult()
.then((result) => {
return result.user;
}).then((user) => {
// Do stuff.
});
更新: 通过在注销回调中执行硬页面刷新来解决,如下所示:
firebase.auth().signOut()
.then(() => {window.location.href = '/'});
javascript firebase vue.js firebase-authentication vue-router
如何在beforeEnter中访问通过商店操作异步检索的商店数据？
import store from './vuex/store';
store.dispatch('initApp'); // in here, async data will be fetched and assigned to the store's state
// following is an excerpt of the routes object:
{
path: '/example',
component: Example,
beforeEnter: (to, from, next) =>
{
if (store.state.asyncData) {
// the above state is not available here, since it
// it is resolved asynchronously in the store action
}
}
}
这在第一页加载或页面重新加载之后,获取初始化数据并且路由器需要等待该数据允许用户访问该页面时尤为重要.
路由器是否可以"等待"获取数据？或者,与异步vuex商店数据相结合处理导航防护的最佳方法是什么？
(哦和预填充"asyncData"不能解决,因为beforeEnter挂钩需要从数据库做出真实数据的决定,而不是默认数据)
我有以下小提琴https://jsfiddle.net/91vLms06/1/
const CreateComponent = Vue.component('create', {
props: ['user', 'otherProp'],
template: '<div>User data: {{user}}; other prop: {{otherProp}}</div>'
});
const ListComponent = Vue.component('List', {
template: '<div>Listing</div>'
});
const app = new Vue({
el: '#app',
router: new VueRouter(),
created: function () {
const self = this;
// ajax request returning the user
const userData = {'name': 'username'}
self.$router.addRoutes([
{ path: '/create', name: 'create', component: CreateComponent, props: { user: userData }},
{ path: '/list', name: 'list', component: ListComponent },
{ path: '*', redirect: …如果可能的话,我想在路线定义中指定我的标题.通常在<head><title>浏览器标题栏中指定和显示的内容.
我的项目设置如下:
main.js
import Vue from 'vue'
import App from './App.vue'
import VeeValidate from 'vee-validate';
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(VeeValidate);
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
router.js
import Vue from 'vue'
import Router from 'vue-router'
import Skills from './components/Skills.vue'
import About from './components/About.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'skills',
component: Skills,
meta: { title: 'Skills - MyApp' } // <- …vue-router ×10
vue.js ×10
javascript ×6
vuejs2 ×5
vuex ×2
amazon-s3 ×1
axios ×1
firebase ×1
vue-resource ×1