vue-router使用前言基本概念什么是路由（router）路由就是对应关系 Hash地址和组件之间的关系（Ha

附：「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」

前言

基本概念

什么是路由（router）

路由就是对应关系
Hash地址和组件之间的关系（Hash === # 锚链接，vue换了一个马甲）
如：www.baidu.com/#/2，这里的hash… #/2

前端路由工作方式

用户点击了页面上的路由链接
导致了 URL地址栏中的 Hash值发生了变化

前端路由监听了到 Hash 地址的变化
前端路由把当前 Hash地址对应的组件渲染到到浏览器中

小总结：点击路由链接，浏览器会渲染当前 Hash 地址对应的组件内容

常用操作

路由重定向（redirect）

当用户访问 A 页面的时候，强制用户跳转到 B页面。从而展示特定的组件页面，这个就是路由重定向。

在路由规则里（routes）使用 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向

小总结：当我访问 http://localhost:8080/，自动跳转至首页页面

嵌套路由

（1）About组件

// About组件

<template>
  <div>
    <h2>About组件</h2>
    <!-- 子级路由链接 -->
    <router-link to="/about/tab1">tab1</router-link>
    <router-link to="/about/tab2">tab2</router-link>
    <hr/>
    
    <!-- 子级路由占位符 -->
    <router-view></router-view>
  </div>
</template>

（2）配置子路由规则

// router/index.js
<script>
import Tab1 from "@/components/tabs/Tab1.vue"
import Tab2 from "@/components/tabs/Tab2.vue"
  
const router = new VueRouter({
 routes:[
  { // about (父级路由规则)
   path:"/about",
   component:About,
   children: [  // 1. 通过children属性，嵌套声明子级路由规则
   {path:"tab1",component:Tab1},
   {path:"tab2",component:Tab2},
 ]
 }
]
})
</script>

注意：children子路由规则的路径，前面不要加 /

默认子路由

如果 children 数组中，某个路由规则的 path 值为空字符串，则这条路由规则，叫做默认子路由

（1）接嵌套路由这个例子，当我访问about页面的时候，还需要手动点击子级路由 tab1 才会展示对应的内容，此时如果你想点击 about 后展示 tab1的内容，就可以在 children 中把对应组件的path 改为空字符串，这样就可以实现访问 about 页面的时候，默认显示子级路由的类型

// router/index.js
<script>
import Tab1 from "@/components/tabs/Tab1.vue"
import Tab2 from "@/components/tabs/Tab2.vue"
  
const router = new VueRouter({
 routes:[
  { 
   path:"/about",
   component:About,
   children: [  
   {path:"",component:Tab1},
   {path:"tab2",component:Tab2},
 ]
 }
]
})
</script>

使用默认子路由要注意把跳转链接的地址修改一下

从原来的 /about/tab1 改为 /about
这样的话，当访问 about组件会自动的显示 tab1的内容

<router-link to="/about">tab1</router-link>
<router-link to="/about/tab2">tab2</router-link>

（2）也可以使用重定向的方式

// router/index.js
<script>
import Tab1 from "@/components/tabs/Tab1.vue"
import Tab2 from "@/components/tabs/Tab2.vue"
  
const router = new VueRouter({
 routes:[
  { 
   path:"/about",
   component:About,
   redirect:"/about/tab1",
   children: [  
   {path:"tab1",component:Tab1},
   {path:"tab2",component:Tab2},
 ]
 }
]
})
</script>