vue路由怎么切换

如何切换 vue 路由？创建路由对象，指定路径和组件。将路由对象传递给 vue 实例。在模板中使用链接到其他路由。在 javascript 中使用 this.$router.push 或 this.$router.replace 在程序中切换路由。

(图1)

Vue 路由切换

在 Vue.js 应用程序中，可以通过使用路由器来切换路由。

切换路由的步骤：

创建路由对象：使用 VueRouter 实例创建一个路由对象，它指定了要显示的组件以及匹配的路径。
将路由对象传递给 Vue 实例：通过 router 选项将路由对象传递给 Vue 根实例，以便将其与应用程序相关联。
在模板中使用路由链接：使用组件创建指向其他路由的链接。
在 JavaScript 中编程方式切换路由：使用 this.$router.push(path) 或 this.$router.replace(path) 方法在 JavaScript 中编程方式切换路由。

详细说明：

立即学习“前端免费学习笔记（深入）”；

创建路由对象：

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

Vue.use(VueRouter);

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