bob体育官方平台
vue-router 中router-view无法渲染的化解办法_vue.js_脚本之家

最近在做一个vue的项目,其中使用了vue2.0,vue-router2.0。在使用vue-router的时候跳了一个很大的坑,router-view不能渲染,花费了好多时间终于发现了原因。

最近因为业务需要,实现了一个简单的前端 router,正好也来看一下 vue router 是怎么实现的。这次先来一起看看 vue-router 初始化时做了什么。

import Vue from 'vue';import App from './App';import router from './router';/* eslint-disable no-new */new Vue({ el: '#app', router, render: h => h;

    商品   评论   商家       export default { name: 'app', components: { } }; .tab display: flex width: 100% height: 40px line-height: 40px .tab-item flex: 1 text-align: center & > a display: block

vue router 的初始化使用步骤

router/index.js

我们首先来看 vue-router 的使用步骤,然后再分别去看各个步骤都发生了什么。

import Vue from 'vue';import VueRouter from 'vue-router';import goods from '../components/goods/goods.vue';import ratings from '../components/ratings/ratings.vue';import seller from '../components/seller/seller.vue';Vue.use;const routes = [ { path: '/goods', component: goods }, { path: '/ratings', component: ratings }, { path: '/seller', component: seller }, { path: '*', redirect: '/goods' }];const router = new VueRouter({ routes: routes //注意是routes而不是routers,坑就在这里});export default router;

使用 vue-router 需要经过一下几个步骤:

其中在index.js中使用了各种方法,最后查看文档发现原来是routes惹的祸,每次都写的是routers,导致路由根本就没有导入进去,所以在渲染的时候一直不能显示content。如下官方文档中的例子:

引入 vue-router:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

import VueRouter from 'vue-router';

利用 vue 的插件机制,加载 vue-router:

Vue.use;

实例化 VueRouter:

const router = new VueRouter

const app = new Vue.$mount;

Vue 的插件机制

vue 提供了一个 use 方法,来加载插件:

Vue.use = function (plugin: Function | Object) { const installedPlugins = (this._installedPlugins || (this._installedPlugins = [])); if (installedPlugins.indexOf { return this; } // additional parameters const args = toArray; args.unshift; if (typeof plugin.install === 'function') { plugin.install.apply; } else if (typeof plugin === 'function') { plugin.apply; } installedPlugins.push; return this;}

该方法首先检查插件是否已经加载,如果已经加载,直接返回 this。

如果没有加载过,会取所有的参数,并将 this 放在第一个。优先执行 plugin.install 方法,若不能执行,则直接执行 plugin 自身。

最后将 plugin push 到插件列表中。

那么我们就需要看 VueRouter 的 install 方法做了什么,VueRouter 类定义在 src/index.js 文件中。

利用 vue 的插件机制,加载 vue-router

入口文件 index.js 对外 export 了一个 VueRouter 类。VueRouter 类包含了 router 的各种方法,我们直接先来看一下 install 方法。

install 方法在 index.js 中绑定在 VueRouter 类上:

import { install } from './install'VueRouter.install = install

它的实际实现是在 ./install.js 中,install 方法主要做了以下几个事情:

上一篇:没有了 下一篇:没有了
返回顶部