Vue路由

Vue作为单页面应用的框架，路由是必不可少的。现在也很多引入vuejs去使用，今天只说脚手架创建的项目的路由。

我们先看一下，脚手架建好项目之后路由的结构，是一个json，path就是路径，就是浏览器输入的路径，name是这个组件的名字，在路由传参的时候param可以用到。

image

component就是模板，就是这个路由所要显示的模板。

刚创建的时候路径是/，就是根，意思就是打开之后显示的组件。一般我们创建之后打开路由是这样的http://localhost:8080/#/，所以显示的是HellpWorld这个模板对应的页面。比如我们新建页面test1，然后引入

image
这时候http://localhost:8080/#/显示的就是component对应的test1页面。

一般我们的项目都会有指定的首页，那么vue有个路由重定向redirect

image
那么这时候你打开地址之后，路由就会自动跳转到http://localhost:8080/#/index，也就是路径/index。

然后有多少页面，在路由每一个页面就要先import引入，，然后json里面按照格式添加路径和模板。Path是自己起的名字，主要就是对应的模板，比如我路由路径这样写

{
path: '/aaaaaaa/dskjgka/oo',
name: 'index',
component: Test1
}

那我浏览器路径http://localhost:8080/#/aaaaaaa/dskjgka/oo显示的还是test1这个页面。当然，我们路由名字一般会对应的页面内容去起。

这是最简单的路由，如果我们按照这样的格式去使用路由，那么我们打包出来之后，会把所有的页面都打包成一个文件vendorJS。

image

这个函数，我一开始觉得这个参数可以去掉，但是发现是不能去了，所以就只能乖乖按照这个格式去书写，具体的暂时还没有去研究为什么要这样书写。

还有一种写法，官方推荐的

image

这两种写法都是路由懒加载，也就是按需加载的写法，这样打包之后就会拆分成很多个JS。

image

欢迎关注Coding个人笔记 公众号