vue中路由跳转的方式有哪些你知道吗

当我们使用Vue.js来构建单页面应用程序时，路由跳转是不可避免的。Vue.js提供了多种方式来实现路由跳转，下面是其中几种常用的方式：

1. 基于vue-router的声明式导航

为了使用vue-router，我们首先需要将其安装到我们的应用程序中，并且创建一个router实例，来管理我们的路由。然后，我们可以在Vue组件中使用声明式导航来实现路由跳转。

下面是一个基本的Vue Router配置示例：

//1. 引入Vue和Vue Router
import Vue from 'vue'
import VueRouter from 'vue-router'

//2. 注册路由
Vue.use(VueRouter);

//3. 定义路由
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  },
  {
    path: '/contact',
    name: 'contact',
    component: Contact
  }
];

//4. 创建路由实例
const router = new VueRouter({
  routes
});

//5. 导出路由实例
export default router;

在Vue组件中，我们可以使用<router-link>组件来声明式地导航到其他页面，如下所示：

<template>
  <div>
    <h1>Hello World</h1>
    <router-link to="/about">Go to About page</router-link>
    <router-link to="/contact">Go to Contact page</router-link>
  </div>
</template>

上面这个例子中，当用户点击"Go to About page"或者"Go to Contact page"时，路由会自动导航到对应的页面。

2. 基于vue-router的编程式导航

除了声明式导航，我们还可以使用编程式导航的方式来进行路由跳转。这种方式不需要在模板中使用<router-link>组件，而是在Vue组件的JavaScript代码中手动控制路由导航。

下面是一个基本的编程式导航示例：

// 根据 path 进行路由跳转
// 使用 this.$router.push 方法实现
this.$router.push('/about');

// 或者使用命名路由跳转
this.$router.push({ name: 'about' });

在上面这个例子中，当我们在Vue组件中调用this.$router.push方法时，路由会自动跳转到指定的页面。

示例说明

下面通过两个简单的示例来说明这两种方式的应用。

示例1：基于vue-router的声明式导航

假设我们有一个简单的单页面应用程序，其中包含一个菜单和三个页面：Home、About和Contact。我们可以使用<router-link>组件来实现路由跳转。

首先，我们需要在Vue组件中导入vue-router库，并且定义三个路由：

import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
import Contact from './components/Contact.vue';

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact }
  ]
});

然后，在Vue组件的模板中，我们可以使用<router-link>组件来实现路由跳转：

<template>
  <div>
    <nav>
      <ul>
        <li><router-link to="/">Home</router-link></li>
        <li><router-link to="/about">About</router-link></li>
        <li><router-link to="/contact">Contact</router-link></li>
      </ul>
    </nav>
    <router-view></router-view>
  </div>
</template>

在上面这个例子中，当用户点击菜单中的链接时，路由会自动跳转到指定的页面。

示例2：基于vue-router的编程式导航

假设我们有一个登录页面和一个仪表盘页面，我们需要在登录成功后跳转到仪表盘页面。我们可以使用编程式导航来实现。

首先，我们需要在Vue组件中导入vue-router库，并且定义两个路由：

import VueRouter from 'vue-router';
import Login from './components/Login.vue';
import Dashboard from './components/Dashboard.vue';

const router = new VueRouter({
  routes: [
    { path: '/login', component: Login },
    { path: '/dashboard', component: Dashboard }
  ]
});

然后，在登录页面的Vue组件中，当用户输入正确的用户名和密码时，我们可以调用this.$router.push方法来跳转到仪表盘页面：

methods: {
  login() {
    if (this.username === 'admin' && this.password === 'password') {
      this.$router.push('/dashboard');
    }
  }
}

在上面这个例子中，当用户输入正确的用户名和密码时，路由会自动跳转到仪表盘页面。

总之，Vue.js提供了多种方式来实现路由跳转，我们可以根据具体业务需求选择合适的方式来实现。