Vue.js 重定向到另一个页面答案

【问题标题】：Vue.js redirection to another pageVue.js 重定向到另一个页面
【发布时间】：2016-06-10 10:13:33
【问题描述】：

我想在Vue.js 中进行重定向，类似于原版 javascript

window.location.href = 'some_url'

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

【问题讨论】：

你的意思是重定向到 vue router '/my/vuerouter/url' 中定义的路由吗？或者您是否将浏览器重定向到some-url.com？

标签： vue.js url-routing vuejs2 vue-router

【解决方案1】：

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

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

编辑：router.go() 在 VueJS 2.0 中更改。您现在可以使用$router.push({ name: "yourroutename"}) 或router.push("yourroutename") 进行重定向。

Documentation

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

【讨论】：

在我的情况下，用途是指向另一个非单页
我得到：Uncaught ReferenceError: router is not defined 错误，如何在组件中注入路由器？
router.push("yourroutename") 与 router.push({name: "yourroutename") 不同。第一个直接定义路线。第二个采用指定名称的路线。
this.$router.push('routename)
@ka_lin 你打错了，我假设你的意思是这个。$router.push('routename')

【解决方案2】：

根据文档，router.push 似乎是首选方法：

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

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

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

this.$router

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

this.$router.push('Home')

【讨论】：

本题与编译（webpack）无关。
感谢投反对票，尽管大多数人将使用 vue cli、webpack、路由器和 store/vuex 进行开发，并且可能会遇到无法调用路由器的问题。跨度>
@JimmyObonyoAbor hiyo 评论 na downvote utasema unamlipa haha
@Cholowao he he he, sawa tushasikia ！我有反应 kazi ，如果你有技能，请联系我......
@JimmyObonyoAbor

【解决方案3】：

只需使用：

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

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

我的环境：node 6.2.1，vue 1.0.21，Ubuntu。

【讨论】：

我看不出任何原因，为什么这应该用双引号..？
实际上standardjs 说“字符串使用单引号，除非避免转义。”
这是前段时间，但实际上我通过使用单引号解决了这个问题，但我想双引号也应该可以工作，并且可能在复杂的链接中有用。
先查看vue版本。在早期版本中，也许 vue 并不关心代码约定。但是在我的环境中，代码约定会导致编译错误（从 es6 编译到 vanilla js）。如果你没用过 'ES6' 节点模块，也许没问题。
如果您想在新标签页上打开它怎么办？

【解决方案4】：

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

this.$router.push('/url-path')

【讨论】：

【解决方案5】：

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

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

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

this.$router.push({
    path: '/pagename', 
    params: {
         param1: 'value1', 
         param2: 'value2'
    }
});

【讨论】：

谢谢你，我的英雄，你拯救了一天！顺便说一句，param 不起作用，尽管 params 对我有用。

【解决方案6】：

这个也可以试试……

router.push({ name: 'myRoute' })

【讨论】：

【解决方案7】：

只是一个简单的路由：

this.$router.push('Home');

【讨论】：

【解决方案8】：

window.location = url;

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

【讨论】：

【解决方案9】：

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

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

:是v-bind的缩写。

【讨论】：

你也可以使用 ES6 语法：:href="/path-to-route/${IdVariable}" .

【解决方案10】：

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

我们可以使用router.js 中添加的redirect: 选项。例如，如果我们想在用户输入根 URL 或基本 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"),

    },
   ]

【讨论】：

【解决方案11】：

所以，我一直在寻找的只是 在哪里 放置 window.location.href，我得出的结论是，最好和最快的重定向方式是在路由中（这样，我们可以在我们重定向之前不要等待任何东西加载）。

像这样：

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

也许它会帮助某人..

【讨论】：

【解决方案12】：

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

this.$router.push(url);

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

【讨论】：

【解决方案13】：

为了符合您最初的要求：

window.location.href = 'some_url'

你可以这样做：

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

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

【讨论】：

【解决方案14】：

<div id="app">
   <a :href="path" />Link</a>
</div>

<script>
      new Vue({
        el: '#app',
        data: {
          path: 'https://www.google.com/'
        }
      });
</script> enter code here

【讨论】：

【解决方案15】：

从 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)
});

);

【讨论】：

【解决方案16】：

Vue3.js 重定向

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

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>

【讨论】：

【解决方案17】：

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

var url = "/my-relative-path-url";    
<button onclick="app.__vue__.$router.push(\'' + url + '\');">Click Me</button>

【讨论】：