Vue Router

什么是Vue Router?

Vue Router 是 Vue.js 官方的路由管理器。

用 Vue.js + Vue Router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。 —官方文档

怎么用？

首先在views文件夹下创建需要的页面，如：Labels.vue、Money.vue、Statistics.vue。

接着在router文件下的index.ts里写如下代码：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Money from '@/views/Money.vue'
import Labels from '@/views/Labels.vue';
import Statistics from '@/views/Statistics.vue';
Vue.use(VueRouter);
//主要如下代码
const routes = [
  {
    path: '/',
    redirect: '/money'
  },
  {
    path: '/money',
    component: Money
  },
  {
    path: '/labels',
    component: Labels
  },
  {
    path: '/statistics',
    component: Statistics
  },
];
//==================
const router = new VueRouter({
  routes
});
export default router;

详细：

const routes = [
  {
    path: '/',    //指定根目录，当页面第一次
    redirect: '/money'    //根目录默认跳转到该路径下
  },
  {
    path: '/money',        //同上，指定“/money”目录
    component: Money    //该“/money”目录会跳转到该Vue文件渲染的页面
  },
  {
    path: '/labels',    //同上
    component: Labels    //同上
  },
  {
    path: '/statistics',
    component: Statistics
  },
];

注意：

并不是只需要在router文件夹下的index.ts里指定路径与文件就可以完成路由，还需要在main.ts文件里引入router，然后main会把router渲染到App.vue里。如下：

import Vue from 'vue';
import App from './App.vue';
import './registerServiceWorker';
import router from './router';
import store from './store';
Vue.config.productionTip = false;
new Vue({
  router,    //这里！！！！！
  store,
  render: h => h(App)
}).$mount('#app');