我想在Vue.js中做一个类似于香草javascript的重定向

window.location.href = 'some_url'

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


当前回答

所以,我所寻找的只是在哪里放window.location.href和结论,我来的是,最好和最快的方式重定向是在路由(这样,我们不等待任何东西加载之前,我们重定向)。

是这样的:

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

也许它会帮助别人。

其他回答

根据文件,是路由器。推送似乎是首选方法:

要导航到不同的URL,使用router.push。此方法将 历史堆栈中的新条目,因此当用户单击浏览器时 返回按钮,他们将被带到以前的URL。

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

供参考:Webpack和组件设置,单页应用程序(通过Main.js导入路由器),我必须调用路由器函数,这样说:

this.$router

示例:如果你想在满足条件后重定向到一个名为“Home”的路由:

this.$router.push('Home') 

从api获取特定页面 最简单的方法是向URL添加另一个参数,该参数将破坏缓存。

router.replace(数据。电流+ '?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)
});

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

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

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

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

Vue3.js重定向

ve3 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>