1.通过<routerlink>标签来实现路由跳转

代码如下

<template>
<div>
<div id="app">
    <router-link to="/home" replace>首页</router-link>

    <router-link to="/about" replace>关于</router-link>
    <router-view></router-view>
  </div>
</template>

然后通过设置路由来进行跳转

路由代码:

import VueRouter from "vue-router"
import Home from "../components/Home"
import About from "../components/About"
// 引入
// 注册
Vue.use(VueRouter)
const routes = [
  {
    path: "",
    redirect: "/home"
  }, {
    path: "/home",
    component: Home
  },
  {
    path: "/about",
    component: About
  }]
const router = new VueRouter({
  routes,
  mode: "history",
  linkActiveClass: "active"
})
export default router

第二种方式直接通过代码来实现路由跳转

template中的模板
    <button @click="homebar">首页</button>
    <button @click="aboutbar">关于</button>
    <router-view></router-view>
sc中的
export default {
  name: "App",
  methods: {
    homebar() {
      // console.log(1111);
      // 第一种可以进行前进后退
      // this.$router.push("/home");
      // 无法进行前进后退
      this.$router.replace("/home");
    },
    aboutbar() {
      this.$router.replace("/about");
    },
  },
};

两种方式都可以进行路由的跳转