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