[英]Nuxt.js - Script this.$router.push('/') not working
I want to support script Router push
in Nuxt.js
.我想在
Nuxt.js
支持脚本Router push
。 I already make a website using Vue.js
but it's not good for SEO
.我已经使用
Vue.js
制作了一个网站,但它对SEO
Vue.js
。 So, I make a new front-end using Nuxt.js
.所以,我使用
Nuxt.js
制作了一个新的前端。 I copy some components from directory Vue.js to Nuxt.js and run but it takes some error.我将目录 Vue.js 中的一些组件复制到 Nuxt.js 并运行,但会出现一些错误。
In Vue.js
I use this.$router.push('/users/Login')
to go to Login
page.在
Vue.js
我使用this.$router.push('/users/Login')
去Login
页面。 It's working well.它运作良好。 But in
Nuxt.js
it's not working.但是在
Nuxt.js
它不起作用。
Example: When I'm on the page http://localhost:8001/About -> I click button Login -> The URL is http://localhost:8001/About# , it's wrong!示例:当我在页面http://localhost:8001/About -> 我点击按钮 Login -> URL 是http://localhost:8001/About# 时,这是错误的!
Directory: https://imgur.com/a/YxGgXNI目录: https : //imgur.com/a/YxGgXNI
My Header.vue
code (include button Login
)我的
Header.vue
代码(包括按钮Login
)
Short code:短代码:
<script>
export default {
name: 'Header',
data() {
return {
userName:'',
profileUrl:'',
isLoggedIn: false
}
},
methods: {
clickToLogin() {
this.$router.push('/users/Login');
},
}
}
</script>
Full code:完整代码:
<template>
<b-navbar sticky toggleable="md" class="navbar-dark bd-navbar" type="dark">
<b-navbar-toggle target="bd-main-nav" />
<b-navbar-brand to="/">My Blog</b-navbar-brand>
<b-collapse
is-nav
class="justify-content-between"
id="bd-main-nav">
<b-navbar-nav>
<b-nav-item exact to="/">Home</b-nav-item>
<b-nav-item to="/ReviewBooks">Review Book</b-nav-item>
<b-nav-item to="/LifeSkills">Life Skills</b-nav-item>
<b-nav-item to="/About">About</b-nav-item>
<!-- <b-nav-item to="InsertBlogPost">New Post</b-nav-item> -->
</b-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-item v-if="this.isLoggedIn==true">
<span v-show="userName.length > 0" class="align-middle ml-2 text-color">
{{userName}}
</span>
<b-button size="sm" class="my-2 my-sm-0 btn-outline-light btn-space" @click="clickToSignOut">
Sign out
</b-button>
</b-nav-item>
<b-nav-item v-else>
<b-button size="sm" class="my-2 my-sm-0 btn-outline-light"
@click="this.clickToLogin"
>Login
</b-button>
</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</template>
<script>
export default {
name: 'Header',
data() {
return {
userName:'',
profileUrl:'',
isLoggedIn: false
}
},
mounted() {
if (this.$session.exits()) {
let userObject = this.$session.get('loggedInUser')
this.userName = userObject.name ? userObject.name : ''
this.profileUrl = userObject.profileUrl ? userObject.profileUrl : ''
this.isLoggedIn = userObject ? true : false
} else {
this.userName = ""
this.profileUrl = ""
this.isLoggedIn = false
}
},
methods: {
clickToLogin() {
this.$router.push('/users/Login');
},
clickToSignOut() {
this.userName = ''
this.profileUrl = ''
this.isLoggedIn = false
// this.$emit('clickToSignOut')
this.$session.destroy()
this.$router.push('/')
},
}
}
</script>
<style scoped>
.navbar {
background-color: rgba(99, 13, 133, 0.9) !important;
}
.btn-space {
margin-left: 5px;
}
</style>
Try this.$router.push({ path: '/users/Login' );
试试
this.$router.push({ path: '/users/Login' );
or alternatively You could try this或者你可以试试这个
<b-button router to="/users/Login">Login</b-button>
You shouldn`t reference this in template and it will work .你不应该在模板中引用它,它会起作用。
@click="this.clickToLogin"
should be just应该只是
@click="clickToLogin"
My issue was that I was trying to navigate on anchor tag with #
as href.我的问题是我试图使用
#
as href 在锚标记上导航。
<a href="#" @click="redirectToMain()">
So during vuejs navigation was taking place, the url was being updated with #
, and vue considered it as a separate navigation and stop navigation process.所以在 vuejs 导航发生期间,url 被更新为
#
,vue 认为它是一个单独的导航和停止导航过程。 Adding prevent on the click
event resolved this issue.在
click
事件上添加阻止解决了这个问题。
<a href="#" @click.prevent="redirectToMain()">
Actually, you can use following codes for change route in Nuxtjs.实际上,您可以使用以下代码在 Nuxtjs 中更改路由。
this.$router.push("/");
or
this.$router.push({ path: '/'} );
Suppose, In case if your now viewing this link "http://localhost:3000" or "http://192.168.0.102:300" and trying to change route by push using given code to route "/".假设,如果您现在查看此链接“http://localhost:3000”或“http://192.168.0.102:300”并尝试通过使用给定代码推送“/”来更改路由。 so it will not working.
所以它不会工作。 Because, you already viewing this route.
因为,您已经查看了这条路线。 So, Nuxtjs route cant not change.
所以,Nuxtjs 路由不能改变。
For handling this case you can using following technique:为了处理这种情况,您可以使用以下技术:
if($nuxt.$route.path == '/') {
//following 2 line code are sample code here put your need codes
this.isLogin = false;
this.user_full_name = 'My Account';
} else {
// this.$router.push("/");
this.$router.push({ path: '/'} );
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.