vue-router 基本使用、通俗易懂①

一、vue-router 的理解

        vue 的一个插件库，专门用来实现 SPA 应用

二、对 SPA 应用的理解 

        1. 单页 Web 应用（single page web application，SPA）。

        2. 整个应用只有一个完整的页面。

        3. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。

        4. 数据需要通过 ajax 请求获取

三、路由的理解

1. 什么是路由?

        1. 一个路由就是一组映射关系（key - value）

        2. key 为路径, value 可能是 function 或 component

2. 路由分类

        1. 后端路由：

                1) 理解：value 是 function, 用于处理客户端提交的请求。

                2) 工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数来处理请求,

                返回响应数据。

        2. 前端路由：

                1) 理解：value 是 component，用于展示页面内容。

                2) 工作过程：当浏览器的路径改变时, 对应的组件就会显示。

四、基本路由

        介绍了路由的基本概念之后，话不多说，上demo

        效果展示图：

        需求：在不刷新页面的前提下，实现单页面内容的切换          

        

1、基本使用

1）安装vue-router，命令：

npm i vue-router

如果使用vue2的小伙伴，这里需要指定vue-router的版本，vue2引入的版本为3 。

npm i vue-router@3

2）编写router配置项：

在 src目录下创建router文件，在router文件下面创建index.js文件

routes：路由的集合，管理一对一对的路由。

path：路由的路径（相当于路由的key）。

component：路径对应的组件，可以理解为要显示的页面（对应路由的value） 。

//该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'

//引入组件
import About from '@/components/About'
import Home from '@/components/Home'

//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})

这里记得编写About.vue和Home.vue组件

About.vue:

<template>
  <div class="container">
    <h2>我是About的内容</h2>
  </div>
</template>

<script>
export default {
    name:'About',
}
</script>

Home.vue: 

<template>
  <div class="container">
    <h2>我是Home的内容</h2>
  </div>
</template>

<script>
export default {
    name:'Home'
}
</script>

 3）在main.js引入、使用vue-router

import Vue from 'vue'
import App from './App.vue'
//1、引入VueRouter
import VueRouter from 'vue-router'
//2、引入刚刚编写的路由器
import router from './router'

Vue.config.productionTip = false
//3、使用VueRouter
Vue.use(VueRouter)

new Vue({
  render: h => h(App),
  router //4、配置router
}).$mount('#app')

4）编写app.vue

<router-link>： Vue中借助ruoter-link标签实现路由的切换。

        to：表示router-view要展示的内容对应的路径(路由的key)，这里的内容可以理解为组件，

也就是上面在router/index.js文件夹下配置的路由项。

        active-class：可配置高亮的样式。

<router-view>：指定路由的呈现位置。

<template>
  <div id="container">
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <-- Vue中借助ruoter-link标签实现路由的切换 -->
          <router-link class="list-group-item" active-class="active" to="/about" >About</router-link>
          <router-link class="list-group-item" active-class="active" to="/home" >Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <-- 指定路由的呈现位置 -->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style>

</style>

到这里一个路由的基本使用就完成了，兄弟们快动手试一试。 

 

 

HZJ，一个在学习路上匍匐前行的小菜鸟...