【Vue】Vue 路由的配置及使用

// 引入Vue和VueRouter
import Vue from 'vue'
import VueRouter from 'vue-router'
 
// 引入组件
import HomePage from './components/HomePage.vue'
import LoginPage from './components/LoginPage.vue'
import RegisterPage from './components/RegisterPage.vue'
 
// 使用VueRouter插件
Vue.use(VueRouter);
 
// 创建路由实例
const router = new VueRouter({
  mode: 'history', // 使用HTML5 History模式
  routes: [ // 路由配置
    { path: '/', component: HomePage },
    { path: '/login', component: LoginPage },
    { path: '/register', component: RegisterPage }
  ]
});
 
// 创建Vue实例，并将router作为选项传入
new Vue({
  router, // 使用解构赋值简化代码
  // 挂载点
  el: '#app',
  // 渲染模板
  template: `
    <div>
      <h1>Vue Router Demo</h1>
      <nav>
        <ul>
          <li><router-link to="/">Home</router-link></li>
          <li><router-link to="/login">Login</router-link></li>
          <li><router-link to="/register">Register</router-link></li>
        </ul>
      </nav>
      <router-view></router-view>
    </div>
  `
});

这段代码展示了如何在Vue应用中配置Vue Router，并且使用<router-link>和<router-view>组件来渲染导航链接和视图。这是Vue路由的基本用法，对于初学者来说具有很好的教育价值。