vue-router基本使用(一)

先看整体框架

整个结构如上图。
实现效果如下：点击哪个就会展示对应的路由

创建项目

创建项目用用默认的vue2.x创建vue项目即可，路由这一块可以自己去配置

大致理一理项目结构

1、这一部分阅读者可以略过，纯属个人感受总结
2、项目components模块存放两个组件，分别对应着About路由内容和Home路由内容。在没学路由之前，我们要使用组件，只需要在使用的地方调用组件进行引用即可。但这里我们需要实现的是一个类似于点击实现跳转的功能。所以需要用到新技术router
3、router模块中存放这index.js组件，这里记录着路由相关信息，这个是vue官方推荐的写法。咱们暂且这样按规矩写，后面再体会好吧
4、view暂且用不到，和components模块功能一样，分不同模块便于管理
5、App.vue是项目最关键的组件，写过vue的都懂，用于管理其他的vue组件
6、main.js略

学习代码写法

注意：这里我们写代码，我会一次性贴出来，方便读者能跑起来整个项目，但是因为代码前后又相互调用的内容，所以有些内容共会稍显突兀，我会稍作说明。当读者看完并运行起来整个项目后再重新回头阅读和体会即可。

按照目录

1、About.vue
components里面的两个组件不需要解释

<template>
  <div>
      <h2>我是About路由展示</h2>
  </div>
</template>

<script>
export default {
}
</script>

2、Home.vue

<template>
  <div>
      <h2>我是Home路由展示</h2>
  </div>
</template>

<script>
export default {

}
</script>

3、router/index.js

import VueRouter from "vue-router";

import About from '../components/About'
import Home from '../components/Home'

//创建一个路由并暴露出去，后面需要用到的地方通过import VueRouter from './router'进行引入即可
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})

说明：index.js是vue官方默认的配置文件。
我们需要导入vue-router，然后需要实例化一个VueRouter实例，将路由配置进去。配置信息放在routes数组中
一个配置信息一个路由路径，对应一个组件，这个组件在后面的使用中会放在<vue-view/>对应的位置中，
后面我们写App.vue时会看到。

4、App.vue
看代码

<template>
  <div>
    <div>
        <!-- to给定一个路由路径 -->
      <router-link to="/about">About</router-link><br>
      <router-link to="/home">Home</router-link>
    </div>
    <div>
        <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {};
</script>

我们通过<router-link to="/about">About</router-link>来进行引入，这里的这个标签本质上是一个<a>标签，
也就是是一个超链接，但vue给她进行了重写，这里展示了它的用法，点击这个超链接时，他就会将路由导向/about
对应的组件，也就是我们点击这个链接，下面会出现 "我是About路由展示“
<router-view></router-view>类似插槽中的占位符，他也可以给一个name。类比插槽的使用即可。
5、main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'

Vue.use(VueRouter)
Vue.config.productionTip = false
new Vue({
    router,
    render: ha=>ha(App)
}).$mount('#app')

这是程序入口文件。	需要引入vue、vue-router并在实例中配置router

品味框架结构

我所说的仅仅从这个案例出发，后面还会出路由的进阶教程。
从这个案例我们需要学会vue-router的基本使用，我们要用vue-router就需要在三个地方引入vue-router，首先在配置路由中，我们需要实例化一个VueRouter，其次在App.vue足迹暗中，我们需要放置组件，展示组件。
用到router-link，router-view。最后在main.js配置文件中，我们需要在生命周期之前创建router。
在后面我会专门出一篇文章来详细讲解vue的声明周期。

vue-router路由的基本使用差不多就这么多，后面会有高级使用教程，欢迎关注一起学习。
也可以加群交流：1142983793