vue.js 中设置重定向的方法有:使用 router.push() 推送新路由到历史记录,并加载对应组件。使用 router.replace() 替换当前路由,不添加新路由到历史记录。使用 router.beforeeach() 钩子在主文件中设置初始路由。使用条件逻辑在 router.beforeeach() 中检查条件并根据结果重定向。
如何设置 Vue.js 重定向
Vue.js 中设置重定向的方法有几种,具体取决于你的应用程序的需要。
使用 router.push()
最简单的方法是使用 router.push() 方法。它接受一个目标路径或 URL 作为参数,并将其推送到路由历史记录中。例如:
this.$router.push('/about')
这将在浏览器中将 URL 更改为 /about,并加载相应的组件。
使用 router.replace()
router.push() 会将新路由添加到历史记录中,而 router.replace() 则会替换当前路由。这意味着浏览器的前进和后退按钮将不适用于替换后的路由。
this.$router.replace('/about')
设置初始路由
要将特定路由设置为主路由,可以在 main.js 文件中使用 router.beforeEach() 钩子:
import Vue from '<a style="color:#f60; text-decoration:underline;" href="https://www.php.cn/zt/15721.html" target="_blank">vue</a>'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{ path: '/', redirect: '/home' }
]
})
router.beforeEach((to, from, next) => {
if (to.path === '/home') {
next('/')
} else {
next()
}
})
new Vue({
router,
render: h => h(Home)
}).$mount('#app')
在上面的示例中,当用户访问 /home 路径时,他们将被重定向到 / 路径。
条件重定向
你还可以使用条件逻辑来检查某些条件并相应地重定向。例如:
router.beforeEach((to, from, next) => {
if (!this.$store.getters.isAuthenticated) {
next('/login')
} else {
next()
}
})
在上面的示例中,如果用户未通过身份验证,他们将被重定向到 /login 路径。