Vue如何创建一个新页面以及相关路由配置详解

<template>
  <div>
    <!-- 导航链接 -->
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
 
    <!-- 路由出口，渲染与当前路由匹配的组件 -->
    <router-view></router-view>
  </div>
</template>
 
<script>
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue'; // 引入Home组件
import About from './components/About.vue'; // 引入About组件
 
Vue.use(VueRouter); // 告诉Vue使用VueRouter
 
// 定义路由
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];
 
// 创建Router实例
const router = new VueRouter({
  routes // `routes: routes` 的缩写
});
 
export default {
  router // 使用路由
};
</script>

这段代码展示了如何在Vue应用中创建一个新页面，并通过Vue Router进行路由配置。首先，我们定义了两个组件Home和About，然后创建了一个路由实例，并将其导出，以便在Vue应用的入口文件中使用。这是一个典型的Vue应用路由配置方式，对于学习Vue.js的开发者来说具有很好的教育价值。