Vue 3.0 路由

一、路由概念和原理

后端路由: 请求方式、请求地址与 function 处理函数之间的对应关系

const express = require('express')
const router = express.Router()

router.get('/userlist',function(req,res){/*路由处理函数*/})
router.post('/adduser',function(req,res){/*路由处理函数*/})

module.exports = router

前端路由: 实现不同功能之间的切换，Hash 地址与组件之间的对应关系。

前端路由的工作方式

① 用户点击了页面上的路由链接

② 导致了 URL 地址栏中的 Hash 值发生了变化

③ 前端路由监听了到 Hash 地址的变化

④ 前端路由把当前 Hash 地址对应的组件渲染都浏览器中

实现简易的前端路由

1. 导入并注册 MyHome、MyMovie、MyAbout 三个组件

import MyHome from './components/MyHome.vue'
import MyMovie from './components/MyMovie.vue'
import MyAbout from './components/MyAbout.vue'

export default{
    components:{
        MyHome,
        MyMovie,
        MyAbout,
    }
}

2. 通过 <component> 标签的 is 属性，动态切换要显示的组件

<template>
    <h1>App 组件</h1>
    <component :is="comName"></component>
</template>

export default{
    data() {
        return {
            comName: 'my-home', //要展示的组件的名称
        }
    }
}

3. 在组件的结构中声明如下 3 个 <a> 链接，通过点击不同的 <a> 链接，切换浏览器地址栏中的 Hash 值。

<a href="#/home">Home</a>
<a href="#/movie">Movie</a>
<a href="#/about">About</a>

4. 在 created 生命周期函数中监听浏览器地址栏中 Hash 地址的变化，动态切换要展示的组件的名称

created(){
    window.onhashchange = () => {
        switch(location.hash) {
            case: '#/home':
                this.comName = 'my-home'
                break
            case: '#/movie':
                this.comName = 'my-movie'
                break
            case: '#/about':
                this.comName = 'my-about'
                brea