啊……对了,因为这篇文章通篇废话,赶时间的话看红字就行了……
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
中是伪娘页面跳转,重新渲染页面来达到看起来像是页面跳转了一样。
哦,差点忘了,这里应该还有一个路由的介绍...不过完全不想动,贴个名字吧
好了……说路由(个人也比较懵,以后查资料重新改一下……后面内容请无视)
互联网中,数据是被分成多个包进行传输的,然后在包头的地方会有一段跳转地址(我应该画点辅助图的不过上传图片好麻烦的说所以晚点啦)
不过在这里,路由指的貌似是一种抽象的路由,只是负责了多个页面的切换。