小白也能看的懂，vue2使用Router进行路由配置？

目录

一：前言

二：配置与使用

1.安装Vue Router

2.配置路由 

3.运行效果

三：尾记

四：项目的Gitee源码地址 

---

一：前言

        总所周知，使用vue所开发出来的程序通常是单页面应用程序，这是现代web应用程序开发的重要方式。而这种单页面方式主要是通过路由（router）来支持与实现。

“单页面应用（SPA：single-page application），就是只有一张Web页面的应用，是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的web应用程序。” -- from 百度百科

        路由的本质是一种对应关系，根据不同的url请求，返回所对应的不同资源。这样url和资源就有一种一一对应的关系，这就是路由。Vue Router则是Vue.js官方所提供的的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用（SPA）变得易如反掌。 

二：配置与使用

1.安装Vue Router

        在项目的根目录下安装vue-router 全局配置 ，命令： npm i vue-router 默认安装的是4版本适配的是vue3，如果使用的是vue2的话，必须选定3版本。这里我是用的是vue2。

npm i vue-router@3

2.配置路由 

        （1）在根目录下的main.js下进入并插入文件 

// 引入router 插件
import VueRouter from 'vue-router'
// 使用插件
Vue.use(VueRouter)

         （2）在根目录下创建如下目录（只需要关注红框下的即可）

         （3）index.js中的代码如下

        只需要关注写法就好了，以下是多个页面的使用

// 第一步引入插件(本质是一个构造函数)
import VueRouter from 'vue-router'

// 第二步创建router实例对象并暴露
const router = new VueRouter({
  routes: [{
      path: '',
      redirect: "/home/homeSon"
    },
    {
      path: '/home',
      component: () => import('@/views/home'),
    }, {
      path: '/watchTest',
      component: () => import('@/views/watchTest')
    }, {
      path: '/vuexTest',
      component: () => import('@/views/vuexTest')
    }, {
      path: '/minixsTest',
      component: () => import('@/views/minixsTest')
    }, {
      path: '/injectTest',
      component: () => import('@/views/injectTest')
    }
  ]
})

export default router

         （4）因为上面使用了redirect重定向，所以初始跳转页面不是根目录下的App.vue，所以我们要在App.vue的<template></template>标签里写上<router-view></router-view>标签，如下所示

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

         （5）重新返回main.js，修改配置如下

// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App'

// 引入router插件
import VueRouter from 'vue-router'
//使用插件
Vue.use(VueRouter)
// 创建router文件夹 引入实例
import router from './router'
 
// 关闭生产提示
Vue.config.productionTip = false
 
// 创建vm
new Vue({
    // 指定容器
    el: '#app',
    // 解析App模板
    render: h => h(App),
    // 使用路由
    router
})

3.运行效果

        运行效果如下图所示，可以看到，已经可以通过点击显示不同的页面啦。

三：尾记

         通过本次实践，可以发现url和页面资源相对应，同时在使用Vue Router后进行跳转，页面不需要重新加载，所以它的性能比普通的web应用程序更快。这也意味着用户可以更快地完成任务，并且在浏览应用程序时会有更好的用户体验。

        同时单页面应用程序不需要将每个页面作为单独的页面进行访问。这样就可以避免多个页面之间的冲突，并提高搜索引擎的排名。

四：项目的Gitee源码地址 

        有需要学习的小伙伴可以直接在Gitee上下载源码，按照说明运行项目亲身试验哦，逻辑简单适合新手体验~

地址： vue2全家桶练习: 包含vue2下使用router路由跳转，vuex状态管理，inject注入，minixs混入，watch监听