问题是这样的。 联系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')
但是页面并没有渲染出效果,应该路由信息没跑进去 请问什么原因呢?