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

Question

我想在 Vue.js 中进行重定向，类似于原版 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") 进行重定向。

Documentation

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

Answer 2

只需使用：

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

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

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

Answer 3

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

To navigate to a different URL, use router.push. This method pushes a new entry into the history stack, so when the user clicks the browser back button they will be taken to the previous URL.

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

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

this.$router

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

this.$router.push('Home')

Answer 4

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

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

Answer 5

也可以试试这个...

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

Answer 6

window.location = url;

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

Answer 7

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

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

Answer 8

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

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

:是v-bind的缩写。

Answer 9

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

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

Answer 10

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

我们可以使用在router.js中添加的redirect:选项。例如，如果我们希望在用户键入 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 11

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

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

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

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

Answer 12

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

像这样：

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

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

Answer 13

为了与您最初的要求保持一致：

window.location.href = 'some_url'

你可以这样做：

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

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

Answer 14

this.$router.push 可用于重定向 vue.js

中的页面

this.$router.push(url);

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

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

);

Answer 16

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>

Answer 17

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

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

Answer 18

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

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

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

Vue.js redirection to another page

url-routing

vue.js

vue-router

vuejs2