vue-router初探

vue-router初探

探索vue-router原由

上次VUE项目已经创建好了并且VUE项目的结构也了解完了,简略的知道了每个目录的作用,现在开始准备边学VUE边写一个个demo组成的笔记,但是准备开始才发现,肯定需要一个个页面的进行跳转,那么就需要先了解vue路由的使用了,因为在第一篇文章创建VUE项目时就选了默认安装VUE路由插件的,所以这一步可以省略了,直接去了解怎么使用

明确目的

才接触前端的小菜鸟也不想要太高深的功能,能够简单实现以下功能就好了,以后随着技术的沉淀在慢慢加深难度.

1. 管理页面路由
2. 可实现页面间的跳转

开始研究

看了下官方,可能是我水平不够,感觉不知道说的是什么.最后去找了下这方面的基础视频,基本明白怎么用了,在回来看文档神奇的发现,能看懂了…个人感觉这个官方文档对菜鸟太不友好了.
好吧,闲话不说啦,开始正题

创建新页面的组件

在components目录下创建名为CourseCatalogue.vue文件,
内容只要符合vue组件写法的就可以,下面是我的文件内容

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "CourseCatalogue",
  data() {
    return {
      msg: "课程目录"
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
a {
  color: #42b983;
}
</style>

因为我是摸索完了才写的这篇笔记,所以里面的router-link标签还没有说,不过不影响,可以放在那里不需要管,

将这个组件引入路由管理中

我的理解是在components目录中的都是一个一个视图组件,只能够让每个页面去使用各个组件,只有在路由中注册的视图组件才能够成功页面级的

扩展:
     事实上,我感觉只有第一个根VUE实例是一个页面,之后每个页面只是在这个根页面中改变显示的内容而已.切换不同的路由只是在让根VUE实例显示不同的状态

在文件 src -> router -> index.js中写入import CourseCatalogue from '@/components/CourseCatalogue'
完整代码

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import CourseCatalogue from '@/components/CourseCatalogue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

设置这个页面的路由

直接上完整代码

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import CourseCatalogue from '@/components/CourseCatalogue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/CourseCatalogue',
      name: 'CourseCatalogue',
      component: CourseCatalogue
    }
  ]
})

设置点击跳转路由事件

在HelloVorld.vue中加入router-link标签

    <router-link to="/CourseCatalogue">现在开始进入课程目录</router-link>

注意:不要使用a标签,那也会刷新页面,rotuer-link标签是封装了a标签的标签,需要改样式的话使用a标签也是可以改变rotuer-link的样式的

去根VUE中修改代码

到上一步时已经可以实现调整页面了,但是会有个问题,这里先不说明,最后总结时在说明,修改文件src -> app.vue文件代码如下:

<template>
  <div id="app">
  
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</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>

修改路由模式

这是运行起来会发现页面已经可以调整了,页面也正常显示,但是路由中很奇怪,多了个#/的目录
在/目录的路由地址是

http://localhost:8080/#/

在/CourseCatalogue目录的路由地址是

http://localhost:8080/#/CourseCatalogue

这个看这很不爽,也没看谁家的网址是这样显示的啊.太low了,必须解决,解决办法就是在 src -> router -> index.js中修改路由mode值
完整代码

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import CourseCatalogue from '@/components/CourseCatalogue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/CourseCatalogue',
      name: 'CourseCatalogue',
      component: CourseCatalogue
    }
  ], mode: 'history'
})

现在所有的目的已经完成了

总结

我理解的VUE路由功能就是在在路由管理对象中注册一个视图组件并且对应设置一个路由地址,然后在需要显示的地方使用router-view标签占位,当路由改变时这个标签就是显示这个路由对应的视图组件

项目代码地址

github