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

Question

我想在Vue.js中进行类似于原生JavaScript的重定向。

window.location.href = 'some_url'

我该如何在Vue.js中实现这个？

- Jimmy Obonyo Abor

---

你的意思是重定向到Vue路由器中定义的路由'/my/vuerouter/url'，还是重定向到http://some-url.com？ - hitautodestruct

Answer 1

如果您正在使用Vue Router，则可以使用router.push(path)以编程方式导航到任何特定路由（请注意，在Vue 2之前，这是router.go(path)）。

路由器本身可以从Vue实例的$router属性中访问，这意味着您可以使用this.$router.push(path)从组件内部访问push。

您还可以使用对象语法进行更多控制，包括导航到预配置的named routes。来自文档：

// object
router.push({ path: 'home' })

// named route
router.push({ name: 'user', params: { userId: '123' } })

// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' } })

// with hash, resulting in /about#team
router.push({ path: '/about', hash: '#team' })

除了Vue路由器之外，window.location.href = 'some url'; 对于非单页面应用程序也可以正常工作。

---

如果您正在寻找更加永久的重定向，而不仅仅是程序导航，例如将所有example.com/foo点击重定向到example.com/bar，那么您应该使用Vue Router的redirect或alias功能。

重定向

重定向在路由配置中进行设置，让您告诉Vue Router始终将给定路径重定向到其他地方，例如导航到/foo会将您弹回到/bar：

const routes = [{ path: '/foo', redirect: '/bar' }];

这些路径也可以是动态的，例如：

const routes = [{ path: '/foo/:subPath*', redirect: '/bar/:subPath*' }];
// example.com/foo/profile?id=123 --> example.com/bar/profile?id=123

别名

别名 类似于重定向，可以将流量从一个位置路由到另一个位置，但它们不会更改用户的URL。这样可以通过允许您将UI结构的任意部分映射到任何路径来提供更大的灵活性。

来自文档：

const routes = [
  {
    path: '/users',
    component: UsersLayout,
    children: [
      // this will render the UserList component for these 3 URLs:
      // - /users
      // - /users/list
      // - /people
      { path: '', component: UserList, alias: ['/people', 'list'] },
    ],
  },
]

- Jeff

---

在我的情况下，使用是将其指向另一个非单页面。 - Jimmy Obonyo Abor

我遇到了"Uncaught ReferenceError: router is not defined"错误，如何在组件中注入router？ - Saurabh

这段代码的含义是将当前页面路由切换到名为 routename 的目标路由。 - ka_lin

this.$router.push({ name: 'routename' }) 对我有效。 - Osh Mansor

@ka_lin，你打错字了，我猜你的意思是这样的。$router.push('routename') - James Dube

Answer 2

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

要导航到不同的URL，请使用router.push。此方法将新条目推入历史记录堆栈中，因此当用户单击浏览器返回按钮时，他们将返回到上一个URL。

来源：https://router.vuejs.org/en/essentials/navigation.html FYI: 对于Webpack和组件设置、单页应用（在Main.js中导入路由器）,我必须通过以下方式调用路由器函数：

this.$router

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

this.$router.push('Home') 

- Dave Sottimano

---

这个问题与编译（webpack）无关。 - Jimmy Obonyo Abor

谢谢你的投票，尽管大多数人将使用vue cli、webpack、router和store/vuex进行开发，但很可能会遇到无法调用router的问题。 - Dave Sottimano

@JimmyObonyoAbor，你会说那个评论和踩一下是在支付他的工资哈哈。 - Cholowao

@Cholowao 嘿，嘿，嘿，听说了吗！我得到了一个 React 的工作任务，如果你有相关技能，请联系我... - Jimmy Obonyo Abor

很明显可以说 this.$router.push({name: 'router-name'})。 - Hamidreza Ghanbari

Answer 3

只需使用：

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

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

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

- Siwei

---

我看不出来为什么这个应该用双引号括起来..? - Moritz

实际上，standardjs 表示：“在字符串中使用单引号，除非需要避免转义。” - Moritz

这是一段时间以前的事情了，但我实际上通过使用单引号解决了这个问题，但我想双引号也应该可以工作，并且在复杂的链接中可能会有用。 - Jimmy Obonyo Abor

首先检查Vue的版本。在早期版本中，可能Vue并不关心代码规范。然而在我的环境中，代码规范会导致编译错误（从ES6编译到Vanilla JS）。如果您没有使用“ES6”节点模块，那么可能没问题。 - Siwei

如果你想在一个新的标签页中打开它，该怎么办？ - Fthi.a.Abadi

Answer 4

当在组件脚本标签中时，您可以使用路由并像这样执行操作。

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

- Njeru Cyrus

Answer 5

如果你想要导航到另一个页面，请使用这个。

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

如果您想带参数转到另一个页面，请使用此选项。

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

- Bagzie

---

谢谢你，我的英雄，你拯救了这一天！顺便说一下，param 没有起作用，但 params 对我有效。 - Miron

我在Vuexy主题上使用以下代码： return router.push({ name: 'publisher-slots' }); 用于表单提交成功后的跳转。 - lincolndu

Answer 6

一个非常简单的路由：

this.$router.push('Home')

- Mohammad Mahdi KouchakYazdi

---

请参考kissu对我关于直接使用简单字符串而不是json包装名称的评论的回复。 - undefined

Answer 7

也可以尝试这个...

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

- Davod Aslani Fakor

Answer 8

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

---

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

    },
   ]

- Rakibul Haq

Answer 9

window.location = url;

'url'是您想要重定向的网页链接。

- Rayees Pk

Answer 10

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

像这样：

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

也许这会帮助某些人..

- Marcus