Vue Router的简单理解和使用

官网第一句话：

用 Vue + Vue Router 创建单页应用非常简单：通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们。

什么是单页面应用呢？

单页面应用（Single Page Application，SPA），是一种现代化的Web应用开发方式，通过动态加载内容提供了更好的用户体验和性能。

进入正题： 

（1）是什么？

Vue Router就是Vue.js官方的路由插件

（2）用来做什么？

让Vue单页面应用组件之间可以互相切换

（3）怎么用？

• 安装，配置，引入，注册，使用
• 安装：

#全局安装路由
npm install vue-router -D   
#局部安装
npm install vue-router --save

• 配置

在根目录下创建文件夹router，在router文件夹下创建index.js文件

• 引入

index.js文件中引入

这里说一下路由中引入组件的三种方式

1.普通引入组件

//引入路由
import VueRouter from "vue-router"

//引入需要跳转的组件  比如 login.vue
import login from "../components/views/login.vue"

//先区分一下router、routers和route的区别

//路由器  router
//多个路由的集合  routers
//单个路由或者某一个路由  route

//他们之间的关系：router会去routes中去查找route

//创建路由器router
const router = new VueRouter({
  routes: [{
    name: 'login',
    //路径，及对应跳转的组件
    path: '/login',
    component: login
  }]
})

//将路由器暴露出去
export default router

优点: 易理解
缺点:webpack在打包的时候会把整个路由打包成一个js文件，如果页面一多，会导致这个文件非常大，加载缓慢，实际项目中较少会这样引入组件。

2.异步加载组件（常用）

component: (resolve) => require(["xxx/SomeComponent.vue"], resolve)

const router = new VueRouter({
  routes: [{
    //页面重定向
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [{
      path: '/redirect/:path*',
      //异步引入组件
      component: (resolve) => require(['@/views/redirect'], resolve)
    }]
  },
    {
      path: '/login',
      ///异步引入组件
      component: (resolve) => require(['@/views/login'], resolve),
      hidden: true
    }

  ]
})
export default router

 2.动态加载组件（常用）

//Vue2中
component: () => import('xxx/SomeComponent.vue')

//Vue3中 将component改为loader
loader: ()=> import("xxx/SomeComponent.vue")

• 注册 

 在main.js中注册路由 

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

import VueRouter from 'vue-router'
import router from "router";

Vue.use(VueRouter)    
Vue.config.productionTip = false

/* eslint-disable no-new */
const vm = new Vue({
  el: '#app',
  //将router对象配置进去
  router,
  render: h => h(App)
})
export default vm

• 使用

在app.vue中进行路由的使用

<template>
  <div id="app">
<!-- router-view 当你的路由path 与访问的地址相符时，会将指定的组件替换该 router-view-->
    <router-view />
  </div>
</template>

<script>
//export default 和export作用只是用于导出模块，在别的模块需要调用这个模块的时候，可以通过import命令引入
//在一个文件或模块中，export、import可以有多个，export default仅有一个
export default {
  name: 'App'
}
</script>

router-link：实现路由之间的跳转
通过to属性指定目标地址，默认渲染为带有正确连接的<a>标签，可以通过配置tag属性生成别的标签。

router-view：相当于占位符，用于显示点击router-link以后出现的内容

点击 <router-link> 时， router.push 方法会在内部调用，所以说，点击<router-link :to="..."> 等同于调用 router.push(...)

Vue进阶（二十六）：详解 router.push()_No Silver Bullet的博客-CSDN博客

到此路由的使用就大功告成啦！

小白一枚，如有错误之处，感谢纠正