vue中的路由

Vue中的路由是指通过 URL 地址来切换不同页面的机制。Vue提供了一个官方的路由插件Vue Router，通过它可以轻松地实现路由功能。

在Vue Router中，我们可以通过定义路由映射将URL和对应的组件关联起来。首先需要在Vue项目中安装Vue Router，然后在main.js文件中引入并使用Vue Router：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = new VueRouter({
  routes
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

在上面的代码中，我们首先导入Vue Router，并在Vue实例中使用它。然后定义了两个路由映射，将根路径'/'和'/about'分别映射到Home组件和About组件。最后，创建了一个Vue Router实例，并将其传递给Vue实例中。这样就可以在项目中使用router-link和router-view组件来进行路由跳转和页面渲染了。

例如，在App.vue中使用router-link组件：

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

通过点击router-link组件，用户可以通过URL地址来跳转到不同的页面，并在router-view中渲染对应的组件。