让我们按照文档顺序来整理这份基础知识。

1. 入门

我们先将 <script src="https://unpkg.com/vue@next"></script> <script src="https://unpkg.com/vue-router@4"></script>放入html文件头部，这样我们就可以愉快的使用Vue和VueRouter。

创建Vue实例 Vue.createApp({})赋给常量const app,这样就行了，将其挂载到我们的htmldom中去，html部分<div id='app'></div>,然后挂载，app.mount('#app'),注意像挂载这行代码一定要放到最后。

创建一个VueRouter实例，const router = VueRouter.craeterRouter({}),接着我们要将这个路由实例导入Vue中去，app.use(router)。我们开始配置路由，配置对象中：

{history: VueRouter.createWebHash(),routes:[{path:'xx路径',component:xx组件}]}，history后面第10我们再来说是什么，routes路由配置的数据都在这，像是路径，映射的组件，命名，参数等都是写在这里。

到此我们的配置都已经完成了，那么比如说我们上面写了xx路径，xx组件，实际场景是怎么用？

首先，我们用 组件导航<router-link to='xx路径'/>（与a标签相似，其可以在不重新加载页面下更改url），然后我们使用 组件视图<router-view>（就像一个占位符）来作为组件导航的出口他所映射的组件模板里写了什么就会显示在组件视图中去。

对于setup函数访问路由（暂时忽略）。

如果有点模糊，可以对照这张图找到相应代码，不一样的地方可以先忽略，不用在意。

2. 动态路由匹配

什么是动态路由匹配呢？

在许多用户中，每个用户的id是不一样的，这时候路径相同部分为静态，而不一样的部分就是动态的，我们要用方法来使得这不一样的部分变为动态。正确说法就是路径参数。

在路由配置当中，路径节点即path下，可以在最后添加：xx表示这部分为路径参数。 { path: '/users/:id', component: User }

响应路由参数的变化？

当我们跳转路由，我们是可以监测其变化的以及做出响应，使用this.$watch要在created钩子函数中调用。

还可以使用beforeRouteUpdate导航守卫，来对路由变化做出响应。

捕获所有路由或404 Not found路由为路由的匹配的语法（忽略）

3. 路由的匹配语法（暂时忽略）

4. 嵌套路由

顾名思义，路由中嵌套着路由，我们在router-view中渲染一个组件，而这个组件模板中不仅可以渲染元素其他内容，还可以再放置router-view，而这个嵌套的路由视图，就是这个组件的路由配置中对应的children属性

{
    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,
      },
    ],
  },

根据你的需要你可以不断嵌套，它跟routes本身一样，是一个数组。

5. 编程式导航

像router-link这种组件导航是声明式，而直接使用router的方法，例如.push这种是编程式。

.push和组件导航一致， .replace替换当前历史记录，不会添加新记录， .go(num)你可以跳转一个数字，匹配相应的次数，当次数超过不匹配，静默失败。

编程式要使用我们需要在方法中去调用它。例如我们有一个按钮<button @click='usepush'>点我</button>,在对应的组件使用methods节点，即const xx组件 = {template：'<div>xx组件</div>',methods:{usepush(){router.push('xx路径')}}}

6. 命名路由

前面提到我们在配置路由时，可以给路由一个名字，

{ path: '/user/:username', name: 'user', component: User }其中name属性就是命名路由了，它的作用就是当我们路由导航时不是又重复了写path，有了它我们可以使用name，但是得先将其变为能够识别js表达式的方式，使用：to，这样就可以传一个对象了，对象中就可以使用name这个属性，以及参数等其他

<router-link :to="{ name: 'user', params: { username: 'erina' }}">

7. 命名视图

当有多个组件视图，我们的组件就不知道对应哪个，要准确对应，就要使用命名视图。 <router-view name='xx'>这个name对应路由配置中的components属性（注意是多了s），其为一个对象，对于使用default即为默认属性，将匹配没有名字name的路由出口，当名：组件一致的化，可以简写。

8. 重定向和别名

我们有这样一个路由 { path: '/home', component：home }

使用重定向redirect { path: '/home', redirect: '/' }

也就是说当路径为/home时，它会跳转为根/路径，然后匹配的组件为home

别名alias

增加一个alias属性， { path: '/about', component：about, alias:'/abme' },当我们输入/abme和/about是一样的。

9. 路由组件传参

我们想要呈现路由的数据时，使用$route，但这样会使得与路由紧密耦合。于是使用props来解决，在组件中加入prop属性节点，它将传递对应的参数例如id就会传入$route.params.id，我们还要在路由配置中开启props为true

这就是布尔模式，当props设置为true时，route.params将被设置为组件的props。

如果我们命名了视图，那么相对应的props也要匹配，也就是说命名多少组件，就多少个props。

{
    path: '/user/:id',
    components: { default: User, sidebar: Sidebar },
    props: { default: true, sidebar: false }
  }

对象模式，props是一个对象时，它的设置是组件的propsprops: { newsletterPopup: false }说的是组件的props为newsletterPopup，值为false

函数模式，将会将route作为参数传入，这样之前$route能使用的，在这里也可以直接使用。

10. 不同的历史模式

history：createWebHashHistory()使用的是，Hash模式，它会在地址栏上出现#，createWebHistory()使用的是，H5模式，则不会有#但需要我们对于服务器配置

VueRouter v4.x基础