一、什么是路由

路由器主要维护的是一个映射表；映射表会决定数据的流向；我们在router.js中定义的路由表就是映射表就是键值key-value的映射(通俗的讲:就是一个url与组件/function的映射)

前端路由的核心是什么呢？改变URL，但是页面不进行整体的刷新。

二、安装vue-router

npm i vue-router

然后在项目的main.js中

const VueObj = new Vue({
  router,
  render: (h) => h(App)
}).$mount('#app')

然后再src目录下创建router文件夹，在文件夹里创建index.js 在index.js中

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
/*
自定义路由表
const routes = [
    {
        path: '', //默认路径
        name: 'index',
        //可以配置重定向 redirect: '/xxx'
        component: () => import('@/xxx/xxx/index'), //懒加载
        children: [
            
        ]
    }
]
*/
const router = new VueRouter({
  routes
})

export default router

然后就是如何去配置在组件中

<router-link to="/login"> //第一种
<router-view/> //第二种 路由出口

在实际开发中,我们会把组件分为两类, 一类是路由组件,一类是普通组件, 我们会把普通组件放在components目录下, 而路由组件则放在views或者pages目录下

很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数

获取动态路由的值:

接收参数 this.$route.params

当前路由对象，可以获取当前路由的 path, name, params, query 等属性。

路径参数用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。因此，我们可以通过更新 User 的模板来呈现当前的用户 ID：

this.$router.push

$router全局路由对象,this.$ router 与直接使用通过 createRouter 创建的 router 实例完全相同。我们使用 this.$router 的原因是，我们不想在每个需要操作路由的组件中都导入路由。

你可以在同一个路由中设置有多个 路径参数，它们会映射到 $route.params 上的相应字段。例如：

匹配模式	匹配路径	$route.params
/users/:username	/users/eduardo	`{ username: 'eduardo' }`
/users/:username/posts/:postId	/users/eduardo/posts/123	`{ username: 'eduardo', postId: '123' }`

而使用$route.params会导致与路由高耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。
我们可以使用props来进行解耦
  
export default new Router({
  mode: "hash",
  base: process.env.BASE_URL,
  routes: [
  {
  path: "/",
  name: "home",
  component: Home
  },
  {
  path: "/user/:id",
  component: User,
  props: true
 }
]

然后在user组件中注册props：['id']

Vue的路由使用(一)