Vue-cli中使用VueRouter

创建路由文件

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

　　1.在router.js中导入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;

在main.js文件中导入路由

import router from "./routes"

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

在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>