vue-cli中使用VueRouter

1、安装VueRouter

npm install  vue-router --save-dev

2、创建路由文件

　　在项目的`src`目录下，创建`router.js`文件，用来专门管理路由，接下来所有的路由都写在这个文件中。

　　1）导入vue-router

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

　　2) 导入需要路由的组件

　　在此要注意，需要的导入的组件是要提前创建好的，最好每个组件单独一个文件。

　　3）创建路由

　　再此，只写个样例

const routes = [{
        path: "/",
        component: Home,
        name: "home"
    },
    {
        path: "/orders",
        component: Orders,
        name: "orders"
    },
    {
        path: "/our",
        component: Our,
        name: "our"
    }
];

　　4）注册路由

const router = new VueRouter({
    routes
});

　　5）导出路由

// 将路由导出，在main.js中导入
export default router;

3、在main.js中导入路由

import router from "./routes"


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

4、在app.vue文件中创建路由出口

// 创建路由出口    
<router-view></router-view>
// 基于Vant组件添加的路由，在需到跳转的地方添加"to"指向路由
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="orders-o" to="/orders">订单</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/our">我的</van-tabbar-item>
    </van-tabbar>