How to achieve redirection to another page in vue. Js

在Vue.js中，实现页面重定向通常涉及使用Vue Router，它是Vue.js的官方路由管理器。Vue Router允许你定义页面路由、导航、嵌套路由等。下面是几种在Vue应用中实现页面重定向的方法：

1. 在路由配置中使用 redirect

在Vue Router的路由配置中，你可以指定一个路由规则以redirect字段来重定向到另一个路由。

javascript
const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
    // 当用户访问/a时，页面会重定向到/b
  ]
})

2. 在组件内使用编程式导航

你可以在Vue组件的方法中使用路由实例的push或replace方法来实现页面导航。

javascript
this.$router.push('/target-page'); // 将用户导航到目标页面，相当于点了一个链接
// 或者
this.$router.replace('/target-page'); // 替换当前的历史记录条目

3. 使用导航守卫进行重定向

Vue Router提供了全局和路由独享的导航守卫，你可以在这些守卫中进行重定向。

javascript
router.beforeEach((to, from, next) => {
  if (to.path === '/a') {
    next('/b'); // 如果用户要访问/a，那么重定向到/b
  } else {
    next(); // 否则，正常导航
  }
});

4. 使用<router-link>进行声明式导航

虽然<router-link>主要是用于声明式导航的，也可以用来触发重定向。

html
<router-link to="/target-page">Go to Target Page</router-link>

设置了重定向的路由规则后，点击这个链接将会让应用导航到/target-page。

示例

假设你有一个登录页面，用户登录成功后需要重定向到首页。你可以在登录方法中使用编程式导航来实现：

javascript
// Login.vue
export default {
  methods: {
    login() {
      // 登录逻辑...
      if (/* 登录成功 */) {
        this.$router.push('/home'); // 重定向到首页
      }
    }
  }
}

重定向是单页应用中常用的功能，Vue Router 提供了灵活的方式来实现不同场景下的页面跳转。在实际应用中，你可能需要结合实际的业务逻辑来选择最合适的重定向方式。

如果您使用的是Vue Router，则可以用于router.push(path)以编程方式导航到任何特定路线（请注意，这是router.go(path)Vue 2 之前的版本）。

$router可以从Vue 实例上的属性访问路由器本身，这意味着您可以push使用this.$router.push(path).

您还可以使用对象语法进行更多控制，包括导航到预配置的命名路由。从文档中：

shell
// object
router.push({ path: 'home' })

// named route
router.push({ name: 'user', params: { userId: '123' } })

// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' } })

// with hash, resulting in /about#team
router.push({ path: '/about', hash: '#team' })

除了 Vue 路由器之外，window.location.href = 'some url';它也适用于非单页应用程序。

---

如果您正在寻找更永久的_重定向_，而不仅仅是编程导航，例如将所有example.com/foo点击重定向到example.com/bar，那么您应该使用Vue Router 的重定向或别名功能。

重定向

重定向位于路由配置中，让你告诉 Vue Router 始终将给定路径重定向到其他地方，例如导航到/foo会将你弹回/bar：

shell
const routes = [{ path: '/foo', redirect: '/bar' }];

这些路径也可以是动态的，例如：

shell
const routes = [{ path: '/foo/:subPath*', redirect: '/bar/:subPath*' }];
// example.com/foo/profile?id=123 --> example.com/bar/profile?id=123

别名

别名就像重定向一样，将流量从一个位置路由到另一个位置，但它们不会更改用户的 URL。这允许您将 UI 结构的任意部分映射到您想要的任何路径，从而提供更大的灵活性。

从文档中：

shell
const routes = [
  {
    path: '/users',
    component: UsersLayout,
    children: [
      // this will render the UserList component for these 3 URLs:
      // - /users
      // - /users/list
      // - /people
      { path: '', component: UserList, alias: ['/people', 'list'] },
    ],
  },
]

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

要导航到不同的 URL，请使用 router.push。此方法将新条目推送到历史堆栈中，因此当用户单击浏览器后退按钮时，他们将被带到上一个 URL。

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

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

shell
this.$router

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

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

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

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

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

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

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

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