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

根据文档,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 3

只需使用:

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

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

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

Answer 4

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

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

Answer 5

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

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

如果你想用参数路由使用这个

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

Answer 6

也可以试试这个...

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

Answer 7

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

像这样：

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

也许它会对某人有所帮助..

Answer 8

只是一个简单的简单路由：

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

Answer 9

window.location = url;

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

Answer 10

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.

Answer 11

如果有人想从一个页面永久重定向/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"),

    },
   ]

Answer 12

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

this.$router.push(url);

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

Answer 13

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

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