前言

昨天做了个笔试，单选还是蛮简单的，不定项就一堆不知道的东西了，然后编程题通过率25%，尬住了哈哈哈，不知道还有没有后续emmm

安装

二选一安装方式

npm install vue-router@4 或者
yarn add vue-router@4

使用

最简单的路由跳转（动态路由）

vue-router的路由是与组件绑定的，也就是一个路由就是一个新的组件，当然这也是能嵌套的
那么我们先来看看最简单一个跳转路由

//app.vue
<template>
  <ul>
    <li>
      <router-link to="/users/eduardo/posts/1/ids/1"
        >/users/eduardo/posts/1/ids/1</router-link
      >
    </li>
    <li>
      <router-link to="/users/eduardo/posts/2/ids/2"
        >/users/eduardo/posts/2/ids/2</router-link
      >
    </li>
  </ul>
  <router-view></router-view>
</template>

用<router-link>来替代<a>标签，to=‘’中就是我们的路由，而<router-view>中则是我们要渲染的组件的地方
编程式路由：还可以通过this.$router.push()来实现路由，router.push({ path: '/home', replace: true })还可以替代当前的页面，而不会往history中添加记录。

再来看看router.js

//router.js
import { createRouter, createWebHistory } from "vue-router";
import UserPost from "./views/UserPost.vue";

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: "/users/:username/posts/:postId/ids/:id", component: UserPost }
  ]
});

分析：

在views目录中存储着我们的组件，首先将UserPost组件引入当前router中，
通过createRouter创建一个router实例
而createWebHistory则是创建一个历史模式，有两种方式，一种是html5模式，也就是这里的createWebHistory，另一种是Hash模式：createWebHashHistory。两者的区别呢后者它在内部传递的实际 URL 之前使用了一个哈希字符（#）。由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。前者就没有这个担心了，所以一般建议采用前者。
前面说过一个路由对应着一个组件，这里路由/users/eduardo/posts/1/ids/1对应着我们的UserPost组件，将会将<template>标签中的内容渲染到<router-view>的地方。

//UserPost.vue
<template>
  <div>
    User {{ $route.params.username }} with post {{ $route.params.postId }} from
    id {{ $route.params.id }}
  </div>
</template>

再来看看UserPost组件中的这个$route.params，他可以访问path中的路径参数，像username，postId等，
我感觉就相当于传参吧，在组件中可以访问路由传来的一些参数，这个后面再细讲。

路由匹配

上面谈到了$route.params,除了可以通过this.$route.params来暴露实例的path属性，
还可以通过$route.query来查询匹配路由的参数，
还可以通过watch方法来监控$route.params的变化
实际上路由匹配应该大多数用正则来操作吧，这里不细说了，正则，用的时候再去看看。

嵌套路由

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        // 当 /user/:id/profile 匹配成功
        // UserProfile 将被渲染到 User 的 <router-view> 内部
        path: 'profile',
        component: UserProfile,
      },
      {
        // 当 /user/:id/posts 匹配成功
        // UserPosts 将被渲染到 User 的 <router-view> 内部
        path: 'posts',
        component: UserPosts,
      },
    ],
  },
]

通过children[]来实现路由的嵌套。实例

命名路由

//router.js
const routes = [
  {
    path: '/user/:username',
    name: 'user',
    component: User
  }
]

//app.vue
<router-link :to="{ name: 'user', params: { username: 'erina' }}">
  User
</router-link>

router.push({ name: 'user', params: { username: 'erina' } })

上面将把路由导向到/user/erina中。实例

命名视图

<router-view class="view left-sidebar" name="LeftSidebar"></router-view>
<router-view class="view main-content"></router-view>
<router-view class="view right-sidebar" name="RightSidebar"></router-view>

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      components: {
        default: Home,
        // LeftSidebar: LeftSidebar 的缩写
        LeftSidebar,
        // 它们与 `<router-view>` 上的 `name` 属性匹配
        RightSidebar,
      },
    },
  ],
})

同样也可以给<router-view>标签命名。如果不理解可参考实例
这边还有一个嵌套命名路由实例

路由重定向与别名

const routes = [{ path: '/home', redirect: '/about' }] 将/home重新定向到/about
也可以是重定向的路由const routes = [{ path: '/home', redirect: { name: 'homepage' } }]
别名我觉得没啥用就不提了哈哈哈

路由组件的传参

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const routes = [{ path: '/user/:id', component: User }]

上面也说过路径参数id，这边可以用下面的方式来建立

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const routes = [{ 	
	path: '/user/:id', 
	component: User, 
	props: true 
	}]

若props为true时将route.params设置为组件的 props。

而且对于命名视图来说

const routes = [
  {
    path: '/user/:id',
    components: { 
		default: User,
		sidebar: Sidebar 
	 },
    props: { 
		default: true, 
		sidebar: false 
	}
  }
]

要给每个name设置props，像这样sidebar: false
对象模式和函数模式就不谈了。

此外

导航守卫，元信息，组合式api什么的就暂时不提了，还没学，谈下懒加载

懒加载

当项目运行构建的时候，js包会变得特别大，可以通过动态导入的方式分割组件

// 将
// import UserDetails from './views/UserDetails'
// 替换成
const UserDetails = () => import('./views/UserDetails')

const router = createRouter({
  // ...
  routes: [{ path: '/users/:id', component: UserDetails }],
})

然后当路由被访问的时候才加载对应组件,能减少缓存，提高性能吧。
建议都这样使用。