【无标题】

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"
//import sky from "../views/sky.vue"

/*最合理的加载方式：常用的页面用import，在进入页面的时候就已经加载完
不常用的页面就用懒加载的箭头函数，只有在被调用的时候才会被引入*/

Vue.use(VueRouter)

const routes = [
  //route-named
  {
    path: "/douyu",
    name: "douyu",
    component: () => import("../views/DouYu.vue"),
  },
  {
    path: "/zhu",
    component: zhu,
    // name是后期调bug用的,说明这个组件是给谁用的
    name: "zhu",
    //meta就是元数据 固定的,可以放各种自定义的内容
    meta: {
      x: "1212",
      y: "433",
      a: "true",
      title: "猪"
    }
  },
  {
    path: "/sky",
    component: () => import("../views/sky.vue"),
    // name是后期调bug用的,说明这个组件是给谁用的
    // name: sky
    meta: { title: "sky" }
  },
  {
    path: '/',
    name: 'home',
    component: HomeView,
    meta: { title: "首页" }
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue'),
    meta: { title: "关于" }

  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
//必须在router赋值后书写代码
//路由守卫:监听路由的各种操作
router.beforeEach((to, from, next) => {
  console.log("to:", to);
  console.log("from:", from);
  //怎么修改标签的标题
  document.title = to.meta.title
  //next就是允许路由继续运行
})
export default router