前言(￣▽￣)"
这篇博客是在开始代码后碰到的主要问题，上网上找了蛮多资料的。vue-cli的这个router文件把我给弄疯了......(事实上还是我太菜。悲伤)
路由？(+_+)?
先来看看路由吧，在平常中路由的描述是连接两个或多个网络的硬件设备，在网络间起网关的作用。而在Vue中的Router(路由)我觉得也是起类似的中间作用。拿出我们的官方文档中的描述:将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。我感觉router是一个页面中转站，声明其他页面然后路径放入router，再给主页面调用。页面（page）可能不一定，组件(components)可能更贴切一点。
使用 o(////▽////)q
一、以调用的方式作为页面的一个插入部分。
- html
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>```
- JavaScript
```// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 现在，应用已经启动了！
这是官方的样例。可以看到在页面中的调用主要通过<router-link></router-link>和 <router-view></router-view>来实现。一个链接一个呈现。类似于一个超链接。
除此之外在vue文件中还有另一种方法，通过import导入文件命名后在<template></template>里面调用即可。
这是App.vue中的部分代码
以及文件目录
请选择性忽视我的抽风命名ε=ε=ε=(￣▽￣)。
在主Vue中通过import what from './components/creazy'将creazy.vue这个文件中的代码命名为what。
- creazy.vue代码
<template id="home">
<div>
????????????????!
<router-link to="/aa">aa</router-link>
</div>
</template>
我在其中还用到了另一个<router-link></router-link>在这暂且忽视。
那么import what from './components/creazy'出来的效果与<router-link></router-link>同样
二、是在Vue-cli中对router这部分模块进行配置
首先要知道router文件的几个需要的相关文件：
- App.vue
- components
- main.js(js文件入口，需要了解)
- index.html(页面入口，需要了解)
首先我们知道页面从index进入
index文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue_addname</title>
</head>
<body>
<div id="app" ></div>
<!-- built files will be auto injected -->
</body>
</html>
嗯，什么都没有，只有一个 <div id="app" ></div>有点价值，再看
main.js文件：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
render:h => h(App)
})
有一个Vue实例，看到这应该都能把两个文件联系起来，知道大概的意思：实例定位页面上id=app,加载了router和App.vue两个文件。纳，这时候又得搬出官方文档了，毕竟这里面变量啥意思有啥要求咱也不懂，欸，生活不易，天天叹气。跳过这部分还是讲router，接下来既然看到App.vue和router文件自然要去看一看。
App.vue:
<template>
<div id="app">
<p>-----------------------------</p>
<router-view>
<!-- 用于盛放模块 -->
</router-view>
<p>------------------------------</p>
<router-link to="/aa">aa</router-link>
<router-link to="/">home</router-link>
</div>
</template>
这文件里面被我弄得有点杂，我单截了一部分，测试的话差不多也就这样。这个App.vue就是我们默认打开后看到的第一个页面。可以看到里面用<router-view></router-view>
显示组件部分但并没有声明。那么声明在哪，看router
而router下面只有一个index.js文件:
import Vue from 'vue';
import Router from 'vue-router'; // vue-cli全套不包括路由...需要自己下载，大概是因为有一些人比较喜欢用第三方插件，所以就不集成在一起了
import aa from '@/components/aa.vue';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/', // 这个是指默认渲染的文件，这里我渲染了index文件
name: 'home',
component: () => import('@/components/creazy.vue')
},
{
path: '/aa',
name: 'aa',
component:aa
},
]
})
这里提一嘴，因为有的是没有vue-router的，所以可以在package.json中查看自己的依赖
没有的则需要通过npm进行安装
router下的index.js文件可以看到，声明了aa.vue并向router添加了aa.vue与creazy.vue。
emmmm~为什么会有个path: '/' 好吧就官方文档上看这似乎涉及到命名视图的部分。我认为可能是作为一个默认的主页面路径？啧，还是得看官方文档。
配置到这里已经可以通过<router-link>在页面中调用设立好的组件(components)了。我调用的组件代码和效果如下：
- aa.vue
<template id="aa">
<div>
这是主页的内容!
</div>
</template>
点击home以及默认
后言(〒▽〒)
这个其实参考了一些大佬的博客，但是没有保存链接于是不了了之。
最近要去考科目三，我这被疫情拖了一个学期的科目三啊，服气了。
前端这玩意儿好多好杂......我吐了。