vue router的使用

Vue Router是Vue.js官方提供的路由管理器，它能够帮助我们实现单页面应用（SPA）中的路由功能。本文将介绍Vue Router的基本使用方法。

1. 安装Vue Router

   npm install vue-router --save
   # 或者
   yarn add vue-router
   

2. 创建路由组件

   <!-- Home.vue -->
   <template>
     <div>
       <h1>Home</h1>
     </div>
   </template>
   
   <!-- About.vue -->
   <template>
     <div>
       <h1>About</h1>
     </div>
   </template>
   

3. 配置路由信息

   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 }
   ]
   
   const router = new VueRouter({
     routes // 使用路由表配置信息生成路由器实例
   })
   

4. 在应用中使用路由组件

   <template>
     <div id="app">
       <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> | {{ message }}
       <router-view></router-view> // 显示当前路由对应的组件内容
     </div>
   </template>
   

5. 编程式导航和传参

   this.$router.push('/about') // 导航到About页面