DDR爱好者之家

基于Vue+Webpack拆分路由文件实现管理
站长资源 2024/12/24 佚名
5 1538
DDR爱好者之家 Design By 杰米

事实是，如果你的项目不是特别大，一般是用不着分拆的。如果项目大了，那就需要考虑分拆路由了。其实，这个操作并不复杂。

当我们用 vue-cli 工具，创建一个新的 vue 项目时，就已经给大家新建好了一个路由文件 src/router/index.js ，内容如下：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component: HelloWorld
  }
 ]
})

我们以这个文件为蓝本，进行调整。举例，我们现在要新建一个 news 的这个路由，然后这个路由下面，还有一些子路由，我们就可以这样写：

router/index.js 文件调整

// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
// 子路由视图VUE组件
import frame from '@/frame/frame'

import HelloWorld from '@/components/HelloWorld'
// 引用 news 子路由配置文件
import news from './news.js'

Vue.use(Router)

export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component: HelloWorld
  }, {
   path: '/news',
   component: frame,
   children: news
  }
 ]
})

如上，我们引入一个子路由视图的 vue 组件，然后再引入 news 的子路由配置文件即可。下面我们来编写这两个文件。

frame/frame 子路由视图 vue 组件

<template>
<router-view />
</template>

子路由视图组件就异常简单了，如上，三行代码即可，有关 router-view 的相关内容，请查看：

https://router.vuejs.org/zh/api/#router-view

router/news.js 子路由配置文件

其实，配置这个文件和 vue 没有什么关系，纯粹就是 js es6 的导出和导入而已。

import main from '@/page/news/main'
import details from '@/page/news/details'

export default [
 {path: '', component: main},
 {path: 'details', component: details}
]

如上，即可。我们就完成了路由的多文件管理了。这样看，是不是很简单呢？有什么问题，请在评论中留言，我会抽时间答复大家。

更多内容，请参考官方网站：https://router.vuejs.org/zh/

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

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米