Vue之初识Router(路由)

前言(￣▽￣)"

这篇博客是在开始代码后碰到的主要问题，上网上找了蛮多资料的。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以及默认

后言(〒▽〒)

这个其实参考了一些大佬的博客，但是没有保存链接于是不了了之。
最近要去考科目三，我这被疫情拖了一个学期的科目三啊，服气了。
前端这玩意儿好多好杂......我吐了。