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

Question

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

window.location.href = 'some_url'

我怎么能在Vue.js中实现这一点？

Answer 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")来重定向。

https://router.vuejs.org/guide/essentials/named-routes.html

Answer 2

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

---

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

    },
   ]

Answer 3

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

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

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

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

this.$router

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

this.$router.push('Home') 

Answer 4

只需使用：

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

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

我的环境：节点6.2.1，视图1.0.21，Ubuntu。

Answer 5

在组件脚本标记内部，您可以使用路由器并执行类似的操作

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

Answer 6

只是一个死的简单路由：

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

Answer 7

window.location = url;

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

Answer 8

可以试试这个......

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

Answer 9

你也可以直接使用v-bind来模板...

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

:是v-bind的缩写。

Answer 10

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

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