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");
},
},
};
两种方式都可以进行路由的跳转
