快速了解什么是锚点

一碗谦谦粉

已于 2022-03-13 20:06:37 修改

阅读量1.9w

点赞数 10

分类专栏： ┉┇前端小知识文章标签： html5

于 2022-03-12 11:32:59 首次发布

本文链接：https://blog.csdn.net/weixin_45764765/article/details/123440348

版权

┉┇前端小知识专栏收录该内容

30 篇文章 3 订阅

订阅专栏

一、什么锚点

锚点是网页制作中超级链接的一种，又叫命名锚记，像一个迅速定位器一样，是一种页面内的超级链接。

二、身边的锚点案例

1、我们可以在百度百科中搜索【薛之谦】

薛之谦（中国内地男歌手、音乐制作人、演员）_百度百科

注意：这时的地址是

2、当我们点击【早点经历】

然后，页面自动上滑到【早年经历】部分

注意这时的地址带上了#1

3、当我们点击【主要作品】

这时页面就会滑动到【主要作品】部分

注意这时的地址带上了#4

4、当我们点击【人物评价】

这时页面就会滑动到【人物评价】部分

注意这时的地址带上了#7

根据上面三个列子，相信谦友们都已经可以看出锚点的作用。

预先加载页面内容，然后通过锚点可以在同一个页面内进行快速定位，这是单页Web应用。

当然实现锚点的方式有很多种，下面根据“谦友717”的猜测，用一个简单的例子去实现上面的锚点案例。

三、实现一个简单的锚点案例

1、一个简单的锚点

案例：

链接：https://pan.baidu.com/s/1CVcpQf-QgHhDumlBVz48nw
提取码：w2c7

运行起来后，效果如下：

（1）点击“基本信息”

（2）点击【主要作品】

2、具体的实现

这里使用的工具是：

VSCodeUserSetup下载安装和快速使用_心有谦谦结-CSDN博客_vscodeusersetup怎么使用

（1）创建一个文件夹“router_test”

（2）引入js库

（3）新建一个html文件：router.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由</title>
</head>
<body>
    <div id="app">
        <!-- 路由定义 -->
        <router-link to="/">基本信息</router-link>
        <router-link to="/experience">早年经历</router-link>
        <router-link to="/works">主要作品</router-link>
        <router-link to="/evaluate">人物评价</router-link>

        <!-- 路由出口 -->
        <router-view></router-view>
    </div>

    <script src="vue.min.js"></script>
    <script src="vue-router.min.js"></script>
    <script>
        // 1-定义视图组件
        const infor = {template : '<div>薛之谦【歌手、音乐制作人、演员】</div>'}
        const experience = {template : '<div>放假回家的薛之谦在商场门口被经纪公司的星探看中，他们百般动员他留下当艺人，答应给他签约、出唱片。可等到薛之谦决定暂停瑞士的学业留下以后，经纪公司又要他出30万的包装费用。</div>'}
        const works = {template : '<div>《天外来物》《尘》《怪咖》《渡 The Crossing》《初学者》《意外》</div>'}
        const evaluate = {template : '<div>手握十几档节目，除了长微博外，随随便便一篇普通微博点赞量也几十万，但这也证明在更多人眼里他还是一个有智慧的谐星以及收视担当。只要看过他上的节目会发现，一旦有让他唱歌的机会，无论是什么样的，他都不会放过。见过薛之谦的人都知道，他有种自然生成的幽默感，这也许注定了他会成为杰出的段子手。</div>'}

        // 2-定义路由
        const routes = [
            {path: '/', component : infor},
            {path: '/experience', component : experience},
            {path: '/works', component : works},
            {path: '/evaluate', component : evaluate}
        ]

        // 3-创建路由实例
        const router = new VueRouter({
            routes
        })

        // 4-挂载路由实例
        new Vue({
            el : "#app",
            router
        })
    </script>
</body>
</html>

（4）运行起来就可以看到效果了