【Vue】路由

在Vue中，路由是指在Vue应用的不同页面间切换的机制。Vue Router是Vue.js的官方路由管理器。它和Vue.js的核心深度集成，可以非常简单的实现SPA（Single Page Application）的页面切换。

以下是一个简单的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: '/home', component: Home },
  { path: '/about', component: About }
];
 
const router = new VueRouter({
  routes
});
 
new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

在上述代码中，我们定义了两个路由，分别指向Home和About组件。然后创建了一个VueRouter实例，并将其传递给Vue实例。

在你的Vue模板中，你可以使用<router-link>来创建导航链接，以及<router-view>来显示当前路由的组件：

<!-- App.vue -->
<template>
  <div id="app">
    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
 
    <router-view></router-view>
  </div>
</template>

当用户点击<router-link>时，Vue Router会切换当前的<router-view>至相应的组件。