阅读 67

学习vue第三天的一点问题求解答

问题是这样的。 联系vue-router的使用, 正常流程是没问题的。 现在做了一个操作, 写了一个类包一下vue-router Ff.js

/* eslint-disable */
import Vue from "vue";
import VueRouter from "vue-router";

// 要告诉 vue 使用 vueRouter
Vue.use(VueRouter);

class Ff {
    constructor(options) {
        const matcher = createMatcher(options.routes || [])
        return this.router = new VueRouter({
            matcher
        })
    }
    push(options) {
        this.router.push(options)
    }
}

function createMatcher() {
    const home = () => import("../components/HelloWorld.vue");
    const Page1 = () => import("../components/Page1.vue");
    const Page2 = () => import("../components/Page2.vue");
    const Page3 = () => import("../components/Page3.vue");
    const Page1A = () => import("../components/Page1-a.vue");
    const Page1B = () => import("../components/Page1-b.vue");
    const Page1C = () => import("../components/Page1-c.vue");
    return [
        {
            path: "/home",
            component: home
        },
        {
            path: "/page1",
            component: Page1,
            children: [
                {
                    path: "Page1A",
                    component: Page1A
                },
                {
                    path: "Page1B",
                    component: Page1B
                },
                {
                    path: "Page1C",
                    component: Page1C
                },
                // 当进入到home时,下面的组件显示  默认显示页面
                {
                    path: "",
                    component: Page1A
                }
            ]
        },
        {
            path: "/page2",
            component: Page2
        },
        /*新增user路径,配置了动态的id*/
        {
            path: "/Page3/:id",
            name: 'page3',
            component: Page3
        },
        // 重定向 默认打开页面
        {
            path: '/',
            redirect: '/home'
        }
    ]
}


export default Ff;
复制代码

同样将生产的对象抛给main.js index2.js

/* eslint-disable */

import routes from './router.config';
import Ff from './Ff';

var ff= new Ff({
    routes
})
debugger
export default ff;
复制代码

main.js拿来使用 main.js

/* eslint-disable */
import Vue from 'vue'
import App from './App.vue'

// 引入路由
import router from "./router/index2"

Vue.config.productionTip = false
debugger
new Vue({
  render: h => h(App),
  router
}).$mount('#app')
复制代码

但是页面并没有渲染出效果,应该路由信息没跑进去 请问什么原因呢?

文章分类
前端
文章标签