一、什么锚点
锚点是网页制作中超级链接的一种，又叫命名锚记，像一个迅速定位器一样，是一种页面内的超级链接。
二、身边的锚点案例
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）运行起来就可以看到效果了
