Vue全家桶 - Vue Router的理解和学习1（Vue Router基础）

Vue Router 是 Vue.js 的官方路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得轻而易举。

以下是一个简单的 Vue Router 使用示例：

首先，安装 Vue Router：

npm install vue-router

然后，在你的 Vue 应用中使用 Vue Router：

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
 
Vue.use(VueRouter);
 
// 定义路由
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];
 
// 创建 router 实例
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
});
 
// 创建和挂载根实例
new Vue({
  router, // （缩写）相当于 router: router
  template: `
    <div>
      <h1>Hello App!</h1>
      <p>
        <!-- 使用 router-link 组件导航 -->
        <router-link to="/">Home</router-link>
        <router-link to="/about">About</router-link>
      </p>
      <!-- 路由出口，渲染匹配的组件 -->
      <router-view></router-view>
    </div>
  `
}).$mount('#app');

在这个例子中，我们定义了两个路由规则，一个指向 Home 组件，另一个指向 About 组件。然后创建了 VueRouter 实例，并将它传递给 Vue 根实例，在模板中使用 <router-link> 来导航，使用 <router-view> 作为占位符来显示当前路由匹配到的组件。