AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【轻松入门vue】vue前端路由

2022-07-20 102
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue前端路由七、Vue前端路由1. 路由的基本概念与原理后端路由前端路由实现简单的前端路由vue-router基本概念2. vue-router的基本使用基本使用步骤路由重定向3. vue-router嵌套路由嵌套路由功能分析实例demo4. vue-router动态路由匹配通过动态路由参数的模式进行路由匹配路由组件传递参数5. vue-router命名路由6. vue-router编程式导航七、Vue前端路由1. 路由的基本概念与原理路由是一个比较广义和抽象的概念，路由的本质就是对应关系。后端路

七、Vue前端路由

1. 路由的基本概念与原理

路由是一个比较广义和抽象的概念，路由的本质就是对应关系。

后端路由
  • 概念：根据不同的用户URL请求，返回不同的内容
  • 本质：URL请求地址与服务器资源之间的对应关系

在这里插入图片描述

在早期的web开发中一般均采用后端路由的形式

  • 后端渲染（存在性能问题）
  • Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作）
  • SPA单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现，同时支持浏览器地址的前进和后退操作
  • SPA原理之一：基于URL地址的hash（hash的变化会导致浏览器记录访问历史的变化，但是hash的变化不会触发新的URL请求）
  • 在实现SPA过程中，最核心的技术点就是前端路由
前端路由
  • 概念：根据不同的用户事件，显示不同的页面内容。
  • 本质：用户事件与时间处理函数之间的对应关系。

在这里插入图片描述

实现简单的前端路由

demo

<div id="app">
    <!--  切换组件的超链接  -->
    <a href="#/zhuye">主页</a>
    <a href="#/keji">科技</a>
    <a href="#/caijing">财经</a>
    <a href="#/yule">娱乐</a>
    <!-- 根据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置 -->
    <!-- 可以把 component 标签当做是【组件的占位符】 -->
    <component :is="comName"></component>
</div>
<script>
    //定义4个组件
    const zhuye = {
        template:'<h1>主页信息</h1>'
    }
    const keji = {
        template:'<h1>科技信息</h1>'
    }
    const caijing = {
        template:'<h1>财经信息</h1>'
    }
    const yule = {
        template:'<h1>娱乐信息</h1>'
    }

    var vm = new Vue({
        el:"#app",
        data:{
            comName:'zhuye'
        },
        components:{
            zhuye,
            keji,
            caijing,
            yule,
        }
    })

    // 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
    window.onhashchange=function () {
        switch (location.hash.slice(1)) {
            case '/zhuye':
                vm.comName = 'zhuye'
                break
            case '/keji':
                vm.comName = 'keji'
                break
            case '/caijing':
                vm.comName = 'caijing'
                break
            case '/yule':
                vm.comName = 'yule'
                break
        }
    }
</script>
vue-router基本概念

vue-router是vue.js官方的路由管理器

它和vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发

vue-router包含的功能有

  • 支持HTML5历史模式或hash模式（常见）
  • 支持嵌套路由
  • 支持路由参数
  • 支持编程式路由
  • 支持命名路由

2. vue-router的基本使用

基本使用步骤
  1. 引入库文件
//注意顺序vue-router依赖vue
<script src="vue.js"></script>
<script src="vue-router.js"></script>
  1. 添加路由链接
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接.会被渲染为href属性 -->
<!-- `to`属性的值会被渲染为#开头的hash地址 -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
  1. 添加路由填充位
<!-- 路由填充位（也叫作路由占位符）路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
  1. 定义路由组件
    const User ={
        template:'<h1>User 组件</h1>'
    }

    const Register ={
        template:'<h1>Register 组件</h1>'
    }
  1. 配置路由规则并创建路由实例
//创建路由实例对象
var router = new VueRouter({
    //router 是路由规则数组
    routes:[
        //每个路由规则都是一个配置对象，其中至少包含path和component两个属性
        //path表示当前路由规则匹配的hash地址
        //component表示当前路由规则对应要展示的组件
        {path:'/user',component:User},
        {path:'/register',component:Register}
    ]
})
  1. 把路由挂载到Vue实例中
var vm = new Vue({
        el:"#app",
        data:{

        },
        //挂载路由实例对象，es6中属性和值相同可以简写成一个；
        //router:router,
        router,
    })

完整demo

<script src="vue.js"></script>
<script src="vue-router.js"></script>

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接.会被渲染为href属性 -->
        <!-- `to`属性的值会被渲染为#开头的hash地址 -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/user">Go to User</router-link>
        <router-link to="/register">Go to Register</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>
<script>
    const User ={
        template:'<h1>User 组件</h1>'
    }

    const Register ={
        template:'<h1>Register 组件</h1>'
    }

    //创建路由实例对象
    var router = new VueRouter({
        //router 是路由规则数组
        routes:[
            //每个路由规则都是一个配置对象，其中至少包含path和component两个属性
            //path表示当前路由规则匹配的hash地址
            //component表示当前路由规则对应要展示的组件
            {path:'/user',component:User},
            {path:'/register',component:Register}
        ]
    })

    var vm = new Vue({
        el:"#app",
        data:{

        },
        component:{
            User,
            Register
        },
        //挂载路由实例对象，es6中属性和值相同可以简写成一个；
        //router:router,
        router,
    })
</script>
路由重定向

路由重定向指的是：用户访问地址A的时候，强制用户跳转到地址C,从而显示特定的组件页面

通过路由规则的redirect属性，指定一个新的路由地址，可以很方便的设置路由的重定向

//router对象中router数组中添以下规则
//其中，path表示需要被重定向的原地址，redirect表示要被重定向的新地址
{path: '/',redirect:'/user'},

3. vue-router嵌套路由

嵌套路由功能分析
  • 点击父级路由链接显示模板内容
  • 模板内容中又有子级路由链接
  • 点击子级路由链接显示子级模板内容
实例demo

在组件register的template中添加router-link等

在router中register路由规则中添加children子路由规则

<script src="vue.js"></script>
<script src="vue-router.js"></script>

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接.会被渲染为href属性 -->
        <!-- `to`属性的值会被渲染为#开头的hash地址 -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/user">Go to User</router-link>
        <router-link to="/register">Go to Register</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>
<script>
    const User ={
        template:'<h1>User 组件</h1>'
    }

    const Register ={
        template:`
            <div>
                <h1>Register 组件</h1>
                <router-link to="/register/tab1">Go to tab1</router-link>
                <router-link to="/register/tab2">Go to tab2</router-link>
                <router-view></router-view>
            </div>
        `
    }

    const tab1={
        template:'<h2>tab1</h2>'
    }
    const tab2={
        template:'<h2>tab2</h2>'
    }


    //创建路由实例对象
    var router = new VueRouter({
        //router 是路由规则数组
        routes:[
            //每个路由规则都是一个配置对象，其中至少包含path和component两个属性
            //path表示当前路由规则匹配的hash地址
            //component表示当前路由规则对应要展示的组件
            {path: '/',redirect:'/user'},
            {path:'/user',component:User},
            
            //children数组表示子路由规则
            {path:'/register',component:Register,children:[
                    {path:'/register/tab1',component:tab1},
                    {path:'/register/tab2',component:tab2}
                ]},

        ]
    })

    var vm = new Vue({
        el:"#app",
        data:{

        },
        component:{
            User,
            Register
        },
        //挂载路由实例对象，es6中属性和值相同可以简写成一个；
        //router:router,
        router,
    })

4. vue-router动态路由匹配

通过动态路由参数的模式进行路由匹配
//创建路由实例对象
var router = new VueRouter({
    routes:[
        //动态路径参数  以冒号开头
        {path:'/user/:id',component:User},
    ]
})
const User ={
    //路由组件中通过$route.params获取路由参数
    template:'<h1>User 组件{{$route.params.id}}</h1>'
}

demo

<script src="vue.js"></script>
<script src="vue-router.js"></script>

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <router-link to="/user/1">Go to User1</router-link>
        <router-link to="/user/10">Go to User2</router-link>
        <router-link to="/register">Go to Register</router-link>
    </p>
    <router-view></router-view>
</div>
<script>
    const User ={
        //路由组件中通过$route.params获取路由参数
        template:'<h1>User 组件{{$route.params.id}}</h1>'
    }

    const Register ={
        template:'<h1>Register 组件</h1>'
    }
    //创建路由实例对象
    var router = new VueRouter({
        routes:[
            {path: '/',redirect:'/user'},
            {path:'/user/:id',component:User},
            {path:'/register',component:Register},
        ]
    })

    var vm = new Vue({
        el:"#app",
        data:{

        },
        component:{
            User,
            Register
        },
        //挂载路由实例对象，es6中属性和值相同可以简写成一个；
        //router:router,
        router,
    })
</script>
路由组件传递参数

$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由耦合

  1. props的值为布尔类型
var router = new VueRouter({
        routes:[
            //如果props被设置为true，参数将会被设置为组件属性
            {path:'/user/:id',component:User,props:true},
        ]
    })
const User ={
        props: ['id'],//使用props接收路由参数
        template:'<h1>User 组件{{id}}</h1>'
    }

demo

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <router-link to="/user/1">Go to User1</router-link>
        <router-link to="/user/10">Go to User2</router-link>
        <router-link to="/register">Go to Register</router-link>
    </p>
    <router-view></router-view>
</div>
<script>
    const User ={
        props: ['id'],//使用props接收路由参数
        template:'<h1>User 组件{{id}}</h1>'
    }

    const Register ={
        template:'<h1>Register 组件</h1>'
    }
    //创建路由实例对象
    var router = new VueRouter({
        routes:[
            {path: '/',redirect:'/user'},
            //如果props被设置为true，参数将会被设置为组件属性
            {path:'/user/:id',component:User,props:true},
            {path:'/register',component:Register},
        ]
    })

    var vm = new Vue({
        el:"#app",
        data:{

        },
        component:{
            User,
            Register
        },
        //挂载路由实例对象，es6中属性和值相同可以简写成一个；
        //router:router,
        router,
    })
</script>
  1. props的值为对象类型

此时props接收就接收不到id了，可以使用第一种$route.params.id访问

//如果props被设置为一个对象，它会被按原样设置为组件属性
{path:'/user/:id',component:User,props:{name:'莫逸风',age:22}},
const User ={
        props: ['name','age'],//使用props接收路由参数
        template:'<h1>User 组件{{name+age+$route.params.id}}</h1>'
    }
  1. props的值为函数类型
//如果props是一个函数，则这个函数接收route对象为自己的形参
{path:'/user/:id',component:User,props:route=>({name:'莫逸风',age:22,id:route.params.id})},
const User ={
        props: ['name','age','id'],//使用props接收路由参数
        template:'<h1>User 组件{{name+age+id}}</h1>'
    }

demo

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <router-link to="/user/1">Go to User1</router-link>
        <router-link to="/user/10">Go to User2</router-link>
        <router-link to="/register">Go to Register</router-link>
    </p>
    <router-view></router-view>
</div>
<script>
    const User ={
        props: ['name','age','id'],//使用props接收路由参数
        template:'<h1>User 组件{{name+age+id}}</h1>'
    }

    const Register ={
        template:'<h1>Register 组件</h1>'
    }
    //创建路由实例对象
    var router = new VueRouter({
        routes:[
            {path: '/',redirect:'/user'},
            //如果props被设置为一个对象，它会被按原样设置为组件属性
            {path:'/user/:id',component:User,props:route=>({name:'莫逸风',age:22,id:route.params.id})},
            {path:'/register',component:Register},
        ]
    })

    var vm = new Vue({
        el:"#app",
        data:{

        },
        component:{
            User,
            Register
        },
        //挂载路由实例对象，es6中属性和值相同可以简写成一个；
        //router:router,
        router,
    })
</script>

5. vue-router命名路由

为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”

{path:'/user/:id',name:'user',component:User,props:route=>({name:'莫逸风',age:22,id:route.params.id})},
<router-link :to="{name:'user',params:{id:1}}">Go to User1</router-link>

demo

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <router-link :to="{name:'user',params:{id:1}}">Go to User1</router-link>
        <router-link to="/user/2">Go to User2</router-link>
        <router-link to="/register">Go to Register</router-link>
    </p>
    <router-view></router-view>
</div>
<script>
    const User ={
        props: ['id'],
        //路由组件中通过$route.params获取路由参数
        template:'<h1>User 组件{{id}}</h1>'
    }

    const Register ={
        template:'<h1>Register 组件</h1>'
    }
    //创建路由实例对象
    var router = new VueRouter({
        routes:[
            {path: '/',redirect:'/user'},
            //命名路由
            {path:'/user/:id',name:'user',component:User,props:route=>({name:'莫逸风',age:22,id:route.params.id})},
            {path:'/register',component:Register},
        ]
    })

    var vm = new Vue({
        el:"#app",
        data:{

        },
        component:{
            User,
            Register
        },
        //挂载路由实例对象，es6中属性和值相同可以简写成一个；
        //router:router,
        router,
    })
</script>

6. vue-router编程式导航

  • 声明式导航：通过点击链接实现导航的方式，叫做声明式导航

    • 例如：普通网页中<a></a>链接或vue中的<router-link></router-link>

  • 编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航

    • 例如：普通网页中的location.href

常用的编程式导航API如下：

this.$router.push('hash地址')
this.$router.go(n)//实现前进或后对

demo

<script src="vue.js"></script>
<script src="vue-router.js"></script>

<div id="app">
    <h1>Hello App!</h1>
    <router-link to="/user">Go to User</router-link>
    <router-link to="/register">Go to Register</router-link>
    <router-view></router-view>
</div>
<script>
    const User ={
        template:`
            <div>
                <h1>User 组件</h1>
                <button @click="handel">跳转</button>
            </div>
        `,
        methods:{
            handel:function () {
                this.$router.push('/register')
            }
        }
    }
    const Register ={
        template:`
            <div>
                <h1>Register 组件</h1>
                <button @click="handel">后退</button>
            </div>
        `,
        methods:{
            handel:function () {
                this.$router.go(-1);
            }
        }
    }
    var router = new VueRouter({
        routes:[
            {path:'/register',component:Register},
            {path:'/user',component:User},
        ]
    })

    var vm = new Vue({
        el:"#app",
        data:{

        },
        component:{
            User
        },
        //挂载路由实例对象，es6中属性和值相同可以简写成一个；
        //router:router,
        router,
    })
</script>

router.push()方法的参数规则

//字符串（路径名称）
router.push('/home')
//对象
router.push({path:'/home'})
//命名的路由（传递参数）
router.push({name:'/user',params:{userId:123}})
//带查询参数，编程/register?name=lisi
router.push({path:'/register',query:{name:'lisi'}})

.$router.go(-1);

        }
    }
}
var router = new VueRouter({
    routes:[
        {path:'/register',component:Register},
        {path:'/user',component:User},
    ]
})

var vm = new Vue({
    el:"#app",
    data:{

    },
    component:{
        User
    },
    //挂载路由实例对象，es6中属性和值相同可以简写成一个；
    //router:router,
    router,
})


router.push()方法的参数规则

//字符串（路径名称）
router.push('/home')
//对象
router.push({path:'/home'})
//命名的路由（传递参数）
router.push({name:'/user',params:{userId:123}})
//带查询参数，编程/register?name=lisi
router.push({path:'/register',query:{name:'lisi'}})

文章标签：
JavaScript
前端开发
网络架构
HTML5
移动开发
API
关键词：
前端路由
vue前端
前端入门
入门VUE.js
前端vue
莫逸风
目录
相关文章
html的七十二变
|
10天前
|
移动开发 缓存 前端开发
深入理解前端路由：原理、实现与应用
本书《深入理解前端路由：原理、实现与应用》全面解析了前端路由的核心概念、工作原理及其实现方法，结合实际案例探讨了其在现代Web应用中的广泛应用，适合前端开发者和相关技术人员阅读。
html的七十二变
32 3
土木林森
|
17天前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性，涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性，涵盖前端路由概念、基本原理、常见实现方式（Hash路由和History路由）、优点及挑战，并通过实际案例分析，帮助开发者更好地理解和应用这一关键技术，提升用户体验。
土木林森
47 1
龙大吉
|
26天前
|
编解码 前端开发 JavaScript
从入门到精通：揭秘前端开发中那些不为人知的优化秘籍！
前端开发是充满无限可能的领域，从初学者到资深专家，每个人都追求更快、更稳定、更用户体验友好的网页。本文介绍了四大优化秘籍：1. HTML的精简与语义化；2. CSS的优雅与高效；3. JavaScript的精简与异步加载；4. 图片与资源的优化。通过这些方法，可以显著提升网页性能和用户体验。
龙大吉
19 3
想飞的雪糕
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门：Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络，包括前馈神经网络（FFNN）、深度神经网络（DNN）和循环神经网络（RNN）。通过简单的示例和代码，帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景，并简要介绍了卷积神经网络（CNN）的替代方案。
想飞的雪糕
87 1
进步`于辰
|
1月前
|
移动开发 前端开发 JavaScript
前端实训，刚入门，我用原生技术（H5、C3、JS、JQ）手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面，开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面，涉及多种特效实现，如动态图片切换和人物聚合效果。作品源码已上传至CSDN，视频效果可在CSDN预览。
进步`于辰
31 0
前端实训，刚入门，我用原生技术（H5、C3、JS、JQ）手写【网易游戏】页面特效
一缕微风绕指柔
|
1月前
|
前端开发 JavaScript 开发者
React与Vue：前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue：前端框架的巅峰对决与选择策略
一缕微风绕指柔
49 3
一缕微风绕指柔
|
1月前
|
前端开发 JavaScript 数据管理
React与Vue：两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue：两大前端框架的较量与选择策略
一缕微风绕指柔
50 2
大树营养快线
|
19天前
|
JavaScript 前端开发 搜索推荐
Vue的数据驱动视图与其他前端框架的数据驱动方式有何不同？
总的来说，Vue 的数据驱动视图在诸多方面展现出独特的优势，其与其他前端框架的数据驱动方式的不同之处主要体现在绑定方式、性能表现、触发机制、组件化结合、灵活性、语法表达以及与后端数据交互等方面。这些差异使得 Vue 在前端开发领域具有独特的地位和价值。
大树营养快线
21 0
一缕微风绕指柔
|
1月前
|
前端开发 JavaScript 开发者
React与Vue：前端框架的巅峰对决与选择策略
【10月更文挑战第23天】 React与Vue：前端框架的巅峰对决与选择策略
一缕微风绕指柔
21 0
想飞的雪糕
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记（三）：Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用，通过使用Transformer模型，实现了更智能的搜索功能，如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue，使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程，并展示了实际效果和待改进点。
想飞的雪糕
160 2

热门文章

最新文章

  • 1
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 2
    VueJS && ReactJS 如何？听听别人怎么说。
  • 3
    基于element-plus实现vue3+ts后台管理系统的组件封装(只需传入配置对象，就可以渲染出一个页面(表单+表格))
  • 4
    Vue：elementUI el-dialog组件destroy-on-close套用el-form
  • 5
    中文代码示例之Vuejs入门教程(一)
  • 6
    Nestjs+Vue实现阿里云OSS服务端签名直传
  • 7
    vue之webpack打包原理和用法详解
  • 8
    Vue3+Vite4+Naive-UI 项目自动导入API和组件
  • 9
    新建Vue项目
  • 10
    基于Serverless函数计算FC一键搭建VUE3.0脚手架
  • 1
    【sheetjs】纯前端如何实现Excel导出下载和上传解析？
    444
  • 2
    Mac部署Jenkins（保姆级教程！）_前端jenkins自动部署 mac
    257
  • 3
    前端工程化-babel、corejs、postcss
    80
  • 4
    100道 IT名企前端面试真题，Web前端阿里等大厂面试题汇总
    119
  • 5
    【前端面试】前端面试题300道~~熬夜吐血整理，2024年最新大厂面试经验分享稿
    124
  • 6
    Vue3整合VxeTable，2024大厂前端面试
    62
  • 7
    JavaScript数据类型归纳，架构师花费近一年时间整理出来的前端核心知识
    42
  • 8
    TypeScript在前端项目的渐进式采用策略
    49
  • 9
    10款精美的web前端源码的特效，2024年最新面试题+笔记+项目实战
    87
  • 10
    10款精美的web前端源码的特效(1)，头条前端面试节奏
    211

    • 相关课程

    更多
  • Ajax 前端开发入门与实战
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月