什么是路由

路由：通过互联的网络把信息从源地址传输到目的地的活动。（分发请求） route
作成硬件的话，就叫做路由器。router

相关概念：

1. 分发请求 通过一个路由表来分发到各个目的地
2. 路由表 一个存储到各个目的地的表 （表驱动编程）
3. 默认路由
4. 404路由/保底路由
5. 嵌套路由 例如: hash:#a/b 计算得到[a，b] 第一层路由a，第二层路由b

路由的三种模式

1. hash
   （绑定事件：hashchange）
   • 获取：window.location.hash 链接后面#开头的数据 #xxx （#开头）
   • 例如：https://www.baidu.com/#/a、https://www.baidu.com/#/a/b
   • 任何情况都可以做前端路由
   • 缺点：SEO不友好 根本原因是因为服务器收不到hash #以及#后面的数据被吃掉了
     也有办法解决，google解决办法是 #!xxx 加一个感叹号就能识别，但当然不能跟以前的SEO相媲美。

2. history

   • 获取：window.location.pathname /a/b （/开头）

   • 在history中跳转：window.history.pushState()

   • 使用条件：后端将所有前端路由都渲染到同一个页面（但不是响应404）
     意思就是 /后面不管是什么内容，都到同一个页面，比如到首页

   • 缺点：IE8不支持

   每次点a链接都要重新渲染？？重新刷新页面？？
   先取消掉默认事件，e.preventDefault()；
   获取到href想去的地方；
   所以有了History API，window.history.pushState('','',href)在页面不被刷新的情况下改变url，
   接着执行渲染的相关代码。

3. memory
   路径不存在url上，而是window.localStorage里。
   window.localStorage.setItem("xxx",href);
window.localStorage.getItem("xxx");
   特点：没有url，只能单机，因为url没有改变所以不可分享，适合于非浏览器
   [react native]
   [vue的手机端weex]

三种模式总结

• url
  1. hash：（/#/a）任何情况都能做前端路由，SEO不友好，服务器收不到hash。
  2. history：（/a）后端将所有前端路由都渲染到同一个页面，IE8不支持。
• 非url：
  3. memory：单机

vue router4

Vue Router是Vue.js的官方路由管理器。

1. 创建和挂载根实例

import {createApp} from 'vue'
import App from './App.vue'
import {createWebHashHistory, createRouter} from 'vue-router'

const history = createWebHashHistory()
export const router = createRouter({
    history: history,
    routes: [
        {   path: '/', component: Home  },
        {
            path: '/doc', component: Doc,
            children: [
                {path:'',component:DocDefault},
                {path: 'switch', component: Switch},
                {path: 'button', component: Button}
            ]  
            //注意children里面的path没有‘/’
            //在模版这样写地址：<router-link to="/doc/switch">
        }
    ]
})
const app = createApp(App)
app.use(router)
app.mount('#app')

2. template:

   • 关键词： <router-link to="" />、 <router-view />
     a. <router-link to="" />：链接到对应组件的路由地址，to里面的参数对应routes里面的path，<router-link />会生成一个a链接;
     b. <router-view />：放组件内容的地方。

   • 根页面：

   <!-- 挂载在app上 -->
     <div id="app">
   <router-view></router-view>
   </div>
   

   地址/#/：在<router-view />位置展示home内容。
   地址/#/doc：在<router-view />位置展示doc内容。

   • doc：

      <div class="doc">
        <p> 
      <!-- 组件链接 -->
          <router-link to="/doc/switch">Switch组件</router-link>
          <router-link to="/doc/button">Button组件</router-link>
        </p>
   
      <!-- 默认'/#/doc'展示DocDefaul内容 -->
        <router-view/>
      </div>
   

   点击<router-link to="/doc/switch">Switch组件</router-link>，会在<router-view/>位置展示switch内容。
   点击<router-link to="/doc/switch">Switch组件</router-link>，会在<router-view/>位置展示switch内容。

Vue Router 文档
Vue Router 源码