Vue Router的基本使用、router-link以及router-link-active

<template>
  <div id="app">
    <!-- 使用 router-link 组件导航 -->
    <nav>
      <router-link to="/home">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
 
    <!-- 路由匹配的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>
 
<script>
// 导入 Vue 与 VueRouter
import Vue from 'vue';
import VueRouter from 'vue-router';
 
// 导入页面组件
import Home from './components/Home.vue';
import About from './components/About.vue';
 
// 告诉 Vue 使用 VueRouter
Vue.use(VueRouter);
 
// 创建路由实例
const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About },
  ]
});
 
export default {
  router
};
</script>
 
<style>
  .router-link-active {
    color: red;
  }
</style>

这段代码展示了如何在Vue应用中设置Vue Router，并使用<router-link>组件创建导航链接。当用户点击<router-link>时，对应的路由组件将被渲染到<router-view>所在的位置。此外，router-link-active类被用于为当前激活的导航链接添加样式。