I'd like to make a redirection in Vue.js
similar to the vanilla javascript
window.location.href = 'some_url'
How could I achieve this in Vue.js?
I'd like to make a redirection in Vue.js
similar to the vanilla javascript
window.location.href = 'some_url'
How could I achieve this in Vue.js?
If you are using vue-router
, you should use router.go(path)
to navigate to any particular route. The router can be accessed from within a component using this.$router
.
Otherwise, window.location.href = 'some url';
works fine for non single-page apps.
EDIT: router.go()
changed in VueJS 2.0. You can use router.push({ name: "yourroutename"})
or just router.push("yourroutename")
now to redirect.
Uncaught ReferenceError: router is not defined
error, How to inject router in component?
– Saurabh
Oct 28 '16 at 6:45
According to the docs, router.push seems like the preferred method:
To navigate to a different URL, use router.push. This method pushes a new entry into the history stack, so when the user clicks the browser back button they will be taken to the previous URL.
source: https://router.vuejs.org/en/essentials/navigation.html
FYI : Webpack & component setup, single page app (where you import the router through Main.js), I had to call the router functions by saying:
this.$router
Example: if you wanted to redirect to a route called "Home" after a condition is met:
this.$router.push('Home')
just use:
window.location.href = "http://siwei.me"
Don't use vue-router, otherwise you will be redirected to "http://yoursite.com/#!/http://siwei.me"
my environment: node 6.2.1, vue 1.0.21, Ubuntu.
When inside a component script tag you can use the router and do something like this
this.$router.push('/url-path')
Just a dead simple routing:
this.$router.push('Home');
You can also use the v-bind directly to the template like ...
<a :href="'/path-to-route/' + IdVariable">
the :
is the abbreviation of v-bind
.
`/path-to-route/${IdVariable}`
" Or the the named route as here referred (router.vuejs.org/guide/essentials/named-routes.html): :href="{ name: 'NamedRouteDeclaredAtRouter' , params: { id: idValue } }"
– mEnE
Sep 11 at 10:01
<div id="app">
<a :href="path" />Link</a>
</div>
<script>
new Vue({
el: '#app',
data: {
path: 'https://www.google.com/'
}
});
</script> enter code here
If anyone wants permanent redirection from one page /a
to another page /b
We can use redirect:
option added in the router.js
. For example if we want to redirect the users always to a separate page when he types the root or base url /
:
const router = new Router({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/",
redirect: "/someOtherPage",
name: "home",
component: Home,
// () =>
// import(/* webpackChunkName: "home" */ "./views/pageView/home.vue"),
},
]
if you want to route to another page
this.$router.push({path: '/pagename'})
if you want to route with params
this.$router.push({path: '/pagename', param: {param1: 'value1', param2: value2})