zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    [文字雲產生器] Tagxedo 把文字串成雲、變成畫,印在 T-Shirt、馬克杯、詩袋….
    python学习(六)
    根据URL地址获取域名
    python学习(五)
    Linux下查看Mysql数据库端口的方法
    python学习(四)
    python学习(三)
    python学习(二)
    Java String删除字符串中间的某部分
    Spring的一个入门例子
  • 原文地址:https://www.cnblogs.com/xshan/p/12403187.html
Copyright © 2011-2022 走看看