我想在Vue.js中做一个类似于香草javascript的重定向
window.location.href = 'some_url'
我如何在Vue.js中实现这一点?
我想在Vue.js中做一个类似于香草javascript的重定向
window.location.href = 'some_url'
我如何在Vue.js中实现这一点?
如果你正在使用vue-router,你应该使用router.go(path)来导航到任何特定的路由。路由器可以在组件中使用。$router来访问。
否则,window.location.href = 'some url';适用于非单页应用程序。
编辑:router.go()在VueJS 2.0中更改。你可以使用$router。Push ({name: "yourroutename"})或者只是router.push("yourroutename")现在重定向。
文档
注意:在控制器中使用:this.$router。Push ({name: 'routename'})
只使用:
window.location.href = "http://siwei.me"
不要使用vue-router,否则会被重定向到 “http://yoursite.com/ # ! / http://siwei.me”
我的环境:节点6.2.1,vue 1.0.21, Ubuntu。
根据文件,是路由器。推送似乎是首选方法:
要导航到不同的URL,使用router.push。此方法将 历史堆栈中的新条目,因此当用户单击浏览器时 返回按钮,他们将被带到以前的URL。
来源:https://router.vuejs.org/en/essentials/navigation.html
供参考:Webpack和组件设置,单页应用程序(通过Main.js导入路由器),我必须调用路由器函数,这样说:
this.$router
示例:如果你想在满足条件后重定向到一个名为“Home”的路由:
this.$router.push('Home')
<div id="app">
<a :href="path" />Link</a>
</div>
<script>
new Vue({
el: '#app',
data: {
path: 'https://www.google.com/'
}
});
</script> enter code here
如果有人想从一个页面/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"),
},
]
如果你想路由到另一个页面,使用这个
this.$router.push({path: '/pagename'});
如果你想路由到另一个页面的参数使用这个
this.$router.push({
path: '/pagename',
params: {
param1: 'value1',
param2: 'value2'
}
});
所以,我所寻找的只是在哪里放window.location.href和结论,我来的是,最好和最快的方式重定向是在路由(这样,我们不等待任何东西加载之前,我们重定向)。
是这样的:
routes: [
{
path: "/",
name: "ExampleRoot",
component: exampleComponent,
meta: {
title: "_exampleTitle"
},
beforeEnter: () => {
window.location.href = 'https://www.myurl.io';
}
}]
也许它会帮助别人。
为了与您最初的要求保持一致:
window.location.href = 'some_url'
你可以这样做:
<div @click="this.window.location='some_url'">
</div>
注意,这并没有利用Vue的路由器,但如果你想“在Vue.js中做一个类似于香草javascript的重定向”,这是可行的。
美元。路由器。Push可以用来重定向vue.js中的页面
this.$router.push(url);
这个例子。美元router.push(“回家”); 此方法不会刷新页面
从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)
});
);
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>
如果您正在使用Composition API,方法是使用类似这样的东西
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
router.push({ name: 'about' })
</script>
您可以使用Vue devtools检查路由的名称
我也建议使用name,因为如果你想要更新某个路径,你不需要重写所有的按钮/链接。