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>

 

posted @ 2020-03-03 16:49  xsan  阅读(310)  评论(0编辑  收藏