路由,管理,就像管理好各种组件的逻辑跳转一样,
将本来散乱的组件,组织起来,构建成一个协调的有机体,

router-view   与router-link

这两个标签
router-link, 本身默认是是一个a标签 可以通过tag ,来改变标签属性,例如**tag=‘button’**时,就是一个按钮的样式了,

值得一说的是我们添加link, 不就是为了跳转吗,这里href 变成了 to 而已

而router-view ,顾名思义就是视图的意思,也就是相当于一个组件,多次使用,也会多次显示,但是这个组件不同的是,这个组件相当于一个变量组件,
是变化的,根据router-link.] 跳转的路径显示不同的组件;

但是这里设置路由的时候有一个大坑,就是路由的各种名字,
什么router, routes route
在import 的时候,我发现大家都是前面的字母大写例如import Vue from 'vue',
但是我本来就是一个喜欢作死的人,看到Vue 大写 ,我就偏不,我就用小写,

当然这里因为export default 是没有名字,的所以使用大小写是没有问题的,
一旦使用小写的话,后面的ne vue() ,也必须使用小写,这个是没哟问题的

但是在vue这里出现了问题, 我vue.use(router) 之后,在const routes=[ …]
这里又偏偏作死,写成了routers

我想,待会不就是后面加载的时候,改成routers不就可以吗,可以就是这里除了问题,

export default new router({

    mode :'history',
    routers


})

在显示页面的时候,死活不显示,还没有报错,
以至于我找这个问题找了一天多的时间,一个字母一个字母的找,终于发现这里出了问题,

这个自定义的名字,是可以的,但是这里由于是使用了es6 的语法糖的形式,将前面相同给省略了, 但是如果省略的话,就必须要求是一致的 routes:routes (没有引号)

所以我就是这里出了问题, 如果大家非要自己名字的话也是可以的,不过就不能使用省略的格式了 只能 routes:xxxxx

但是为了简单起见,大家还是直接写routes 吧,以后自己注意点就是了,

其他的就是我是在其他组件引用的route 的时候,

通过注入路由器，我们可以在任何组件内通过this.$router 访问路由器，

也可以通过 this.$route 访问当前路由

this.$route和this.$router区别

this.$route和this.$router 这两个对象有什么区别：

• this.$route 是当前路由跳转对象，包含当前路由的name、path、query、params等属性

• this.$router 是路由导航对象，使用它跳转到其他不同url地址

=============================================================
可能会有各种起名,不过这是没有任何的问题的,但是一般是默认是route 的,
所以用时在调用的route 方法时,需要自己注意一下,

看清楚自己引入的时候起的名字,别被自己给搞糊涂了

---

总结一下:

就是我们import的时候的导入的 vue-router 这个路由,
router 就像于是一个route 的集合体,抽象体
routes ,就是 各个url 的集合

通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，
也可以通过 this.$route 访问当前路由

没事的话可以试试这些函数的属性,可以了解的更加的透彻

如果大家还有什么不懂得话,可以看看官方的文档:https://router.vuejs.org/zh/guide/#javascript

---

经常使用route 中params 与query,

如果大家在使用某个对象的属性,是在是想不来的时候可以,
直接log 这个对象 ,查看其中的属性:
例如console.log(this.$route) ,打印的当前的路由:

在这里我想强调的是, 我们在学习的路上总会遇到我们意向不到的困难,但是我们的学会如何去解决这个问题,

一般没有思路的时候,可以没事直接console.log( ), 一下可能会出现奇效,
,编写逻辑代码的时候, 解决不了,可以直接想想最特殊的情况,在慢慢扩展到普遍一般的情况, 或者使用逆向思维想想

---

官方的代码写的是真的好:

// Home.vue
export default {
  computed: {
    username () {
      // 我们很快就会看到 `params` 是什么
      return this.$route.params.username
    }
  },
  methods: {
    goBack () {
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/')
    }
  }
}