本文详细介绍了Vue路由的原理与实现，包括SPA概念、路由配置和无痕浏览特性。同时，还逐步指导如何搭建Node.js环境，涉及Node.js与npm的介绍，以及从下载安装到配置环境变量、修改npm镜像和运行Node.js项目的全过程。
目录
一、vue路由
SPA是什么
单页web应用（single page application,SPA），就是只有一个web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的web应用程序
单页面应用程序
只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中
传统多页面应用程序
对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面
优势
减少了请求体积，加快页面响应速度，降低了对服务器的压力
更好的用户体验，让用户在web app感受native app的流畅
路由
路由思路
导入Vue.vue-router的js依赖
首先需要定义组件（就是展示不同的页面效果）
定义路由与组件的对应关系
获取vueRouter对象 new VueRouter({routes:routes})
将路由挂载到Vue实例中
定义锚点
触发事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js" type="text/javascript" charset="utf-8">
</script>
<!-- 1.引入路由js依赖 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>
<title></title>
</head>
<body>
<div id="app">
<!-- 触发点击事件 -->
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<!-- 6.定义锚点 -->
<router-view></router-view>
</div>
</body>
<script type="text/javascript">
// 2.定义组件
// const/let/var 首页对应的组件、关于对应的组件
const Home = Vue.extend({
template: '<div>这是首页内容，展示最新的10篇博客</div>'
})
const About = Vue.extend({
template: '<div>这是关于本站显示的内容区域</div>'
})
// 定义路由与组件的对应关系
let routes = [
{
path: '/home',
component: Hom
最低0.47元/天 解锁文章
313
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
