204

我想进行Vue.js类似于香草 javascript的重定向

window.location.href = 'some_url'

我如何在 Vue.js 中实现这一点?

4

18 回答 18

279

如果您使用vue-router,则应使用router.go(path)导航到任何特定路线。可以使用 . 从组件内部访问路由器this.$router

否则,window.location.href = 'some url';适用于非单页应用程序。

编辑router.go()在 VueJS 2.0 中更改。您可以使用$router.push({ name: "yourroutename"})or just router.push("yourroutename")now 来重定向。

文档

注意:在控制器中使用:this.$router.push({ name: 'routename' })

于 2016-02-27T08:43:45.653 回答
106

根据文档, router.push 似乎是首选方法:

要导航到不同的 URL,请使用 router.push。此方法将新条目推送到历史堆栈中,因此当用户单击浏览器后退按钮时,他们将被带到上一个 URL。

来源:https ://router.vuejs.org/en/essentials/navigation.html

仅供参考:Webpack 和组件设置,单页应用程序(通过 Main.js 导入路由器),我不得不通过以下方式调用路由器功能:

this.$router

示例:如果您想在满足条件后重定向到名为“Home”的路由:

this.$router.push('Home') 
于 2017-02-26T03:58:49.483 回答
51

只需使用:

window.location.href = "http://siwei.me"

不要使用vue-router,否则会被重定向到“ http://yoursite.com/#!/http://siwei.me

我的环境:节点 6.2.1,vue 1.0.21,Ubuntu。

于 2016-06-29T06:24:41.617 回答
36

在组件脚本标签内时,您可以使用路由器并执行类似的操作

this.$router.push('/url-path')
于 2018-03-25T17:22:09.227 回答
22

如果你想路由到另一个页面使用这个

this.$router.push({path: '/pagename'});

如果您想使用参数路由到另一个页面,请使用此

this.$router.push({
    path: '/pagename', 
    params: {
         param1: 'value1', 
         param2: 'value2'
    }
});
于 2019-08-29T09:38:13.823 回答
12

这个也可以试试。。。

router.push({ name: 'myRoute' })
于 2018-07-17T12:08:27.537 回答
12

只是一个简单的路由:

this.$router.push('Home');
于 2018-12-30T13:03:03.260 回答
7

如果有人想要从一个页面永久重定向/a到另一个页面/b


我们可以使用redirect:router.js. 例如,如果我们想在用户键入根或基本 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"),

    },
   ]
于 2019-07-10T11:13:18.253 回答
6
window.location = url;

'url' 是您要重定向的网址。

于 2018-07-21T12:46:52.000 回答
5

所以,我一直在寻找的只是放置在哪里window.location.href,我得出的结论是,最好和最快的重定向方式是在路由中(这样,我们在重定向之前不会等待任何内容加载)。

像这样:

routes: [
    {
        path: "/",
        name: "ExampleRoot",
        component: exampleComponent,
        meta: {
            title: "_exampleTitle"
        },
        beforeEnter: () => {
            window.location.href = 'https://www.myurl.io';
        }
    }]

也许它会帮助某人..

于 2020-07-08T10:05:22.253 回答
5

您也可以直接使用 v-bind 到模板,例如...

<a :href="'/path-to-route/' + IdVariable">

:的缩写v-bind

于 2019-05-07T13:28:10.400 回答
4

this.$router.push 可用于重定向 vue.js 中的页面

this.$router.push(url);

例如 this.$router.push('home'); 此方法不会刷新页面

于 2021-04-01T06:06:49.813 回答
1

为了符合您最初的要求:

window.location.href = 'some_url'

你可以这样做:

<div @click="this.window.location='some_url'">
</div>

请注意,这并没有利用使用 Vue 的路由器,但是如果您想“在 Vue.js 中进行类似于 vanilla javascript 的重定向”,这将起作用。

于 2020-07-14T10:52:09.383 回答
1

我正在使用 Vue3,这对我有用

router.push({ name: 'myRoute' })
于 2022-02-04T05:12:50.497 回答
0

Vue3.js 重定向

可以在 main.ts 中使用此方法定义 Vue3 js 全局重定向

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.config.globalProperties.$redirect = (page) => {router.push(page)}
app.use(router).mount('#app')

零件

<button @click="$redirect('/login')" type="button" class="btn ">Login</button>
于 2021-07-05T10:19:11.500 回答
0

我想从我正在使用的 CRM 中通过 javascript 插入的自定义按钮进行重定向。要执行重定向,请使用以下脚本。与此处其他答案的不同之处在于,要访问路由器,我需要该应用程序。我的场景的vue对象,因此请在控制台中查看类似的内容:

var url = "/my-relative-path-url";    
<button onclick="app.__vue__.$router.push(\'' + url + '\');">Click Me</button>
于 2021-12-11T08:02:41.597 回答
0
<div id="app">
   <a :href="path" />Link</a>
</div>

<script>
      new Vue({
        el: '#app',
        data: {
          path: 'https://www.google.com/'
        }
      });
</script> enter code here
于 2019-05-09T09:55:55.613 回答
0

从 api 获取特定页面 最简单的方法是在 URL 中添加另一个会破坏缓存的参数。

router.replace(data.current + '?t=' + (new Date()).getTime())

例如

router.beforeEach((to, from, next) => {

axios
    .get('http://domazin.com/currentpage')
    .then(response => {
     const data = response.data
       if (to.path != data.current) {
              router.replace(data.current + '?t=' + (new Date()).getTime())
       } else {
          next()
       }
    })
    .catch(error => {
        console.log(error)
});

);
于 2021-04-30T08:39:32.507 回答