App.vue
<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/zhu">zhu</router-link>
<router-link to="/sky">sky</router-link>
<router-view />
</div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
a {
margin: 10px;
display: inline-block;
text-decoration: none;
&.router-link-exact-active {
color: orange;
}
}
</style>
路由配置index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import zhu from "../views/zhu.vue"
Vue.use(VueRouter)
const routes = [
{
path: "/douyu",
name: "douyu",
component: () => import("../views/DouYu.vue"),
},
{
path: "/zhu",
component: zhu,
name: "zhu",
meta: {
x: "1212",
y: "433",
a: "true",
title: "猪"
}
},
{
path: "/sky",
component: () => import("../views/sky.vue"),
meta: { title: "sky" }
},
{
path: '/',
name: 'home',
component: HomeView,
meta: { title: "首页" }
},
{
path: '/about',
name: 'about',
component: () => import( '../views/AboutView.vue'),
meta: { title: "关于" }
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
router.beforeEach((to, from, next) => {
console.log("to:", to);
console.log("from:", from);
document.title = to.meta.title
})
export default router