Vue-router 2改变路由,但不更新视图
Vue-router 2 changes route but does not update the view?
我有一个登录问题的网站使用:
- Vue.js v2.0.3
- vue-router v2.0.1
- vuex v0.8.2
在routes.js
中,我有一个简单的拦截器设置
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
// this route requires auth, check if logged in
// if not, redirect to login page.
if (!router.app.auth.isUserLoggedIn) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next() // make sure to always call next()!
}
})
在login.vue
中,它在使用Google API后处理登录页面逻辑,仅用于登录成功,我调用此:
this.login(userData).then(
() => this.$router.push(this.redirectToAfterLogin), // Login success
() => {} // Login failed
)
mounted: function(){
if (this.auth.isUserLoggedIn){
// Let's just redirect to the main page
this.$router.push(this.redirectToAfterLogins)
}else{
Vue.nextTick(() => {
this.loadGooglePlatform()
})}}
computed: {
redirectToAfterLogin: function() {
if (this.$route.query.redirect){
return this.$route.query.redirect
}else{
return '/'
}
}
}
router.js
var VueRouter = require('vue-router')
// Router setup
export const router = new VueRouter({
linkActiveClass: "is-active",
mode: 'history',
saveScrollPosition: true,
routes: [
{ path: '', name: 'root', redirect: '/home' },
{ path: '/login', name: 'login', meta: { loadingNotRequired: true }, component: require('./pages/login.vue') },
{ path: '/logout', name: 'logout', meta: { loadingNotRequired: true }, component: require('./pages/logout.vue') },
{ path: '/home', name: 'home', title: 'Home', redirect: '/home/random', component: require('./pages/home.vue'),
children: [
{ path: 'random', name: 'random', meta: { requiresAuth: true }, title: 'Random', component: require('./pages/random.vue') }
]
}
]
})
// Redirect to login page if not logged In
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
// this route requires auth, check if logged in
// if not, redirect to login page.
if (!router.app.auth.isUserLoggedIn) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next() // make sure to always call next()!
}
})
现在这里this.login
只是调用vuex,更新登录的用户。
登录后,URL将更改为/home,但DOM没有更新!
成功改变DOM的唯一方法是强迫location.reload()
,这不是我想做的,因为它失去了我在Head中动态加载的G脚本。
有什么办法来强制视图更新DOM吗?
注意:它只发生在用户的第一次登录,如果他注销和重新登录,重定向是好的
可能不是一个完美的解决方案,因为它将重新创建组件,但它将适用于具有相同路由的每种情况&需要更新组件
用
更新<router-view/>
或<router-view></router-view>
<router-view :key="$route.fullPath"></router-view>
我们尽可能重用组件。你应该使用beforeRouteUpdate
来响应使用相同组件的路由开关
我有同样的问题"URL更改到/home,但DOM不更新"。
在我的项目中,标签"transition"造成了这个问题。
希望对大家有所帮助!
也许你应该将redirectToAfterLogin函数设置为方法,这样每次都会重新计算。只有当使用的v-model改变时,计算才会被修改。为了坚持函数名的含义,我将在其中设置router push。
登录。vue:
mounted: function(){
if (this.auth.isUserLoggedIn){
// Let's just redirect to the main page
// this.$router.push(this.redirectToAfterLogins)
this.redirectToAfterLogins()
}else{
Vue.nextTick(() => {
this.loadGooglePlatform()
})
}
},
// computed: {
methods: {
this.login(userData).then(
// () => this.$router.push(this.redirectToAfterLogin), // Login success
() => this.redirectToAfterLogin(), // Login success
() => {} // Login failed
),
redirectToAfterLogin: function() {
if (this.$route.query.redirect){
// return this.$route.query.redirect
this.$router.push(this.$route.query.redirect)
}else{
// return '/'
this.$router.push('/')
}
}
}
- https://v2.vuejs.org/v2/guide/computed.html计算属性
- https://v2.vuejs.org/v2/guide/computed.html Computed-Caching-vs-Methods
"然而,不同之处在于计算属性是基于它们的依赖来缓存的。计算属性只有在其某些依赖项发生更改时才会重新计算。这意味着只要消息没有更改,对reversedMessage computed属性的多次访问将立即返回先前计算的结果,而不必再次运行该函数。"
方法vs computed and filters:
- 访问值实例/数据在过滤器方法
- $routeParams在传递到新视图时未定义&控制器
- ajax.beginform() 不更新部分视图 MVC
- 角度指令没有更新模型视图
- 如何在渲染新视图之前关闭所有事件
- 从Backbone中的另一个视图调用新视图
- Angular数组更改时更新HTML视图
- 更新淘汰视图模型属性时激发更改事件
- Angular2 在创建 ngSwitch 新视图后调用自定义函数
- Knockout.js-更新父视图模型中的数组,在第二个视图模型中使用值
- 比较两个数组,并通过使用 javascript 保留现有对象来更新新值
- 单击按钮时更新角度视图模型
- 当现有 Google 标记移动到另一个位置时,如何更新新的纬度和经度
- 如何在 DIV 中更新新图像
- 使用 AJAX 更新的模型更新 AngularJS 视图
- 主干新视图反映旧模型数据
- 如何在单击按钮时动态更新部分视图
- 更新主干视图
- 挖空 - 添加了可观察的不更新新对象
- 使用 ajax 从 php 文件中获取随机数不会更新新结果
- 创建新视图时调用呈现函数