vue项目没有router文件夹

[TOC]

>[success] # router文件夹说明

接下来会讲一下 **正常路由结构** ，以及 **封装好的路由结构**。

>[success] ## 正常路由

**创建项目初始化路由** 会在 **src文件夹** 下生成一个 **router.js** 文件。

**router.js**

~~~

import Vue from 'vue'

import Router from 'vue-router'

import Home from './views/Home'

Vue.use(Router)

export default new Router({

routes: [

{

path: '/',

component: Home

{

path: '/about',

// route level code-splitting

// this generates a separate chunk (about.[hash].js) for this route

// which is lazy-loaded when the route is visited.

component: () => import(/* webpackChunkName: "about" */ './views/About.vue')

}

]

})

~~~

这种只是 **简单的路由(搭建项目初始化自动生成的路由文件)** ，如果以后 **复杂** 起来会**难已维护**。

>[success] ## 封装路由

1. 在 **src目录** 下创建一个 **router文件夹** ，这里的思想是把 **routes数组** 拆分成一个 **单独的js文件**，这样看着简洁也**方便维护**。

![](https://img.kancloud.cn/76/ee/76ee106ff5e570f4235eba358b6cbb6c_348x87.png)

2. **router文件夹**

**index.js**

~~~

import Vue from 'vue'

import Router from 'vue-router'

import routes from './router'

Vue.use(Router)

export default new Router({

routes // 这里使用ES6的简写写法，正常应该是这样写'routes : routes '

})

~~~

**router.js**

~~~

import Home from '@/views/Home'

export default [

{

path: '/',

component: Home

{

path: '/about',

// route level code-splitting

// this generates a separate chunk (about.[hash].js) for this route

// which is lazy-loaded when the route is visited.

component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')

}

]

~~~

vue项目没有router文件夹_router文件夹相关推荐

vue项目没有router文件夹_vue项目——Vue Router路由的使用
前言: 学习vue也有一段时间了,这里把学习整个vue项目中的一些知识点和问题,整理下方便自己记录,也希望给大家带来方便.我会连续写几篇系统的文章,讲解一个完整的vue项目中用到的各个使用模块.今天先 ...
vue项目html引入css,vue项目引入自定义.css的样式文件
ES6的引入方式: .vue文件中 css文件引入 @import "../assets/common/common.css";//自定义.css的样式路径 js文件的引入在ma ...
Vue项目使用js-audio-recorder录音及录音文件上传
最近在做的Vue项目里有关于录音和录音文件上传的功能,用到的是一个开源框架js-audio-recorder,官方文档上关于录音.暂停录音等也封装了很多方法,在这里我主要说下录音文件上传部分,网上找了 ...
vue项目没有router文件夹_Vue路由(vue-router)配置实战——动态路由，重定向，工程非根目录...
1. 前言 (1) 资料 (2) 需求本文是在上篇<使用vue-i18n实现多语言>功能的引申.需要实现的功能如下: 多语言需要反映在url上,英文.简体中文.繁体中文页面需分别为/en ...
vue项目没有router文件夹_vueRouter没有报错，但是页面渲染空白
我的inde遇新是直朋能到分览支体调x.js代码 import Vue from 'vue'; import App from './App.vue'; import VueRouter from ' ...
vue项目部署后，font下文件夹样式都找不到
element-icons 和 fontawesome-webfont 等字体无法正常展示解决方法方法1 在build的文件夹里面的utils.js里面publicPath: '-/-/' 方法2 ...
vue 项目打包上线后 js css 文件找不到
在vue项目完成后打包上线,放到服务器上发现js和css引入不到,页面加载不出来. 在使用vue-cli3以上版本构建的应用时,跟以下方式api有些区别: 如何区分是哪个版本? 可查看项目中是否有co ...
vue项目无法下载导出的execel文件
问题:前端访问导出接口无法直接下载文件,而是输出了文件流原因:ajax请求只是个"字符型"的请求,即请求的内容是以文本类型存放的.文件的下载是以二进制形式进行的,虽然可以读取到返 ...
vue项目实现多张图片导出zip文件
场景:批量导出图片并放在一个zip文件下导出,借助jszip以及file-saver插件 1.npm install jszip / npm install file-saver import JS ...
vue项目中使用本地的json文件
转载于:https://blog.51cto.com/11871779/2383011

vue项目没有router文件夹_router文件夹

vue项目没有router文件夹_router文件夹相关推荐

最新文章

热门文章