Vue-cli的路由配置踩坑记录，顺便讲下组件引入组件... (真的不是Vue-cil)
因为偏向于说明文章，所以文章就不卖关子了，免得让小白们误入歧途...虽然大部分时间皮一点比较开心~~
顺便再说一下，我装的8.12的node，vue-cli是3.8.0的
先说说环境吧，我们课程设计要撸静态网页，但是呢，静态网页，两年前我就会撸了好不，这种东西现在学校才教，实在没有意思，正好最近又在搞nodejs，于是故事就这么来了……
因为一个网站不可能有一个页面嘛，免不了要跳转页面，所以一般有多个页面(没错这话就是为了充字数的...说起来我要充字数干嘛啊....)
但是呢，再Vue的脚手架里...只有XXX.vue的文件啊喂，这叫我怎么跳转啊喂，怎么办呢，只好去翻官方文档(有时候最可信的，往往是官方文档，但有时候，官方坑起来比你都恐怖...再次想起被某站官方推荐的 完整版大侦探皮卡丘跳舞 支配的恐怖)
咳...聊正经的，在官网的解释说，你需要配置路由，来实现页面的跳转，可是路由是个啥啊，能吃不，很明显能吃啊，吃完就扑街了。不过这里可以科普下路由的介绍(用自己的理解写的，贴到了文章最后，点我跳转...)
这里的路由，指的是一个虚拟的路由啦，一份配置文件，怎么配置呢，后面会说的，到目前为止，你了解的东西就是，如果想要在Vue脚手架中实现页面跳转，就需要配置路由。
其实这个也不难，当时做的时候，很多文章没有特别说明，也没有贴上项目的层级图片...所以看着挺抽象的...比较难受，啰嗦了这么久，下面就开始上代码了。
起步
首先npm i @vue/cli -g这个，不用讲了吧。什么？你想听，哼，才不讲呢，装个包而已，有什么好说的。
.....好吧，好吧，就这一次，下不为例，@vue/cli是Vue官方提供的一个命令，快速搭建3.x版本的Vue脚手架，2.x的下载方式是npm install vue-cli -globel，你看看，光是安装就比3.x版本多敲了10个字符，所以，来玩3.x吧。
然后构建项目vue create project-name 喂！这里project-name可不是让你直接输个project-name的啊喂！这里指的是你的项目名称，它可以是任何不违法的名称.....
到这里，Vue脚手架搭好了，简单吧...什么？跑题了？没有啊，我们讲的不就是如何搭建Vue脚手架的么？？配置路由？那不应该是隔壁老王干的事么？？？
配置之前的一些事儿
我先贴个当前目录结构出来，你们可以对比一下，如果有问题的话...找找其它文章，或者直接联系我，我的电话号码是...呸，评论留言就好了
嗯...这个结构图是直接复制bootstrap文档里一个介绍目录结构的段落，改内容的...这符号真画不好Orz
src/
├── assets/
│ └── logo.png
├── components/
│ └── HelloWorld.vue
├── App.vue
└── main.js
理论上就这么多了，如果和你们看到的不一样的话....那有很可能是我记性不好，下面列举出一些文件或者是文件夹代表的意思:
- src -- 项目根目录
- assets -- 资源文件(大概，应该同resource)
- components -- 组件库
- HelloWorld.vue -- 一份HelloWorld模板
- App.vue -- 入口文件，全局模板(就这里一个大坑)
环境确认完毕，如果有不一样的地方，希望可以与我提出....或者您就是那只有传说中才会存在的大佬，可以直接看后面....
然后就是开始配置路由了，不过配置了也没什么用，就一个HelloWorld组件，往哪跳哇，自己回调自己么？
这时候怎么办呢，当然是多复制几份呗，我在这里又创建了好多好多的组件，文件内容改改就好，文件目录如下
先声明下，加号内容是要新加的，减号内容是要删除的，你们当前看到的的这个目录大纲处于一个过程阶段，一旦执行，则加上后面三个文件，并删除第一个HelloWorld文件。
src/
├── assets/
│ └── logo.png
├── components/
- │ ├── HelloWorld.vue
+ │ ├── index.vue
+ │ ├── blog.vue
+ │ └── header.vue
├── App.vue
└── main.js
然后在新加的三个文件里分别写点内容
<!-- index.vue -->
<template>
<header_page/>
<div>
Welcome to the —— index!
</div>
</template>
<script>
import header_page from './header'
export default {
name: "index", // 改成文件名或者你喜欢的名字好了...我看其它博客都用文件名的...
components: {
header_page
}
}
</script>
<style scoped></style> <!-- blog.vue -->
<template>
<header_page/>
<div>
Welcome to the —— blog!
</div>
</template>
<script>
import header_page from './header'
export default {
name: "blog", // 改成文件名或者你喜欢的名字好了...我看其它博客都用文件名的...
components: {
header_page
}
}
</script>
<style scoped></style> <!-- header.vue -->
<template>
<ul>
<router-link tag="li" to="/">
<a>
go_index
</a>
</router-link>
<router-link tag="li" to="/blog">
<a>
go_blog
</a>
</router-link>
</ul>
</template>
<script>
export default {
name: "header" // 改成文件名或者你喜欢的名字好了...我看其它博客都用文件名的...
}
</script>
<style scoped></style>header.vue可以说下，但只是肤浅的，具体流程在最后我会说明一遍。
因为这里面写前缀的话可读性较差，所以我后面的直接简写为link和view
先来说说router-link标签，它一般是与router-view结合使用的，link用来切换路由，view负责渲染路由，其中link的tag属性负责将该标签转换为tag里的值，将to转换为a标签里的href
配置路由
在src目录底下创建一个叫router的文件夹，然后创建一个index.js，当然，你用其它名字也可以，只是在导包的时候有一点点不一样，一点点而已。
然后我们的项目结构是这样的:
src/
├── assets/
│ └── logo.png
├── components/
│ ├── index.vue
│ ├── blog.vue
│ └── header.vue
+ ├── router/
+ │ └── index.js
├── App.vue
└── main.js
配置router文件夹下的index文件
import Vue from 'vue';
import Router from 'vue-router'; // vue-cli全套不包括路由...需要自己下载，大概是因为有一些人比较喜欢用第三方插件，所以就不集成在一起了
import blog from '@/components/blog';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/', // 这个是指默认渲染的文件，这里我渲染了index文件
name: 'home',
component: () => import('@/components/index') // es6语法，采用了比较炫酷的写法，具体看个人爱好，问题解决来自一位大佬
},
{
path: '/blog',
name: 'blog',
component: blog
},
]
})其实这个应该是不能用的...因为vue-router没有被安装，细节检查下package.json就能知道，devDependencies里并没有vue-router
安装下就好，npm i vue-router --save-dev，因为跳转页面不一定用的就是他们家的vue-router，所以保存项目就好，没必要全局安装
对于es6语法不懂的，网上找点文章看看，在Babel官网里写es6语法的js，然后编译一下看看转换成的es5是什么样子的，加深理解。
然后这样就好了么？当然没有！
接下来是对App.vue文件的配置，她已经被冷落太久了，提个名字吧。
<!-- app.vue -->
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'app',
components: {}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
App.vue就很简单了，样式不用动，基本什么都不用动，就像是main函数一样，使用个执行函数就行了，刚声明的时候一堆东西，都删了，template里加上一个router-view，完事收工~
但是还是不行啊，这次编译报错，检查下文件，发现main.js一直都没动过，点进去看看，啊，原来路由没有被引用，光是把功能写出来了，却没有调用该功能。
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
router,
}).$mount('#app');
到这里简单的案例也就完成了。
运行项目，npm run serve
流程走向
这里我就要先将文件结构丢进来了，并写明文件所有的函数
src/
├── assets/
│ └── logo.png -- static resource
├── components/
│ ├── index.vue -- vue template
│ ├── blog.vue -- vue template
│ └── header.vue -- router-link
├── router/
│ └── index.js -- config router
├── App.vue -- router-view
└── main.js -- import XXX from './route'
main.js作为入口，导入路由之后并创建一个App.vue对象，在创建的时候App.vue里的router-view会预先渲染router的配置文件index.js中设置的默认的路由，在这里面就是首页。在每个页面中又调用了header组件，组件中有两个超链接可以点，点击跳转路由。
没错，vue实现的其实不是页面跳转，而是页面的渲染。
App.vue作为公共层，App.vue里的内容会被渲染到所有层中，里面的router-view就是渲染路由，子页切换了路由，App.vue就会顺着渲染切换后的路由。
也就是说，vue中是伪娘页面跳转，重新渲染页面来达到看起来像是页面跳转了一样。