目录
一、Vue路由
1.1 路由的使用步骤
① 引入路由的js
② 定义组件
③ 定义路由与组件的对应关系
④ 生成路由对象
⑤ 将vue对象挂载到vue实例中
⑥ 定义锚点
⑦ 定义触发的事件
Leaf这里就直接放上整个页面代码，都写好了实现步骤；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<!-- 1、引入路由的js -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- 7、触发的事件 -->
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<!-- 6、定义锚点 -->
<router-view></router-view>
</div>
</body>
<script type="text/javascript">
//2、定义组件
//Vue.component("Home",{})
const Home = Vue.extend({
template:'<div>这是首页内容，展示最新的10篇博客</div>'
})
const About = Vue.extend({
template:'<div>这是关于本站显示的内容区域，本站的发展史...</div>'
})
//3、定义路由与组件的对应关系
let routes = [
{path:'/home',component:Home},
{path:'/about',component:About},
]
//4、生成路由对象
const router = new VueRouter({routes:routes});
//vue实例
new Vue({
el:"#app",
router,//5、将vue对象挂载到vue实例中
data(){
return {
msg:"hello Leaf!!!"
}
}
})
</script>
</html>
我们测试一下是否成功：
点击首页
点击关于
1.2无痕浏览
要实现无痕浏览，就只需要在你要保留访问记录的页面触发事件中，
加上****replace=" " 就好啦；
<div id="app">
<!-- 7、触发的事件 -->
<router-link to="/home" replace="">首页</router-link>
<router-link to="/about">关于</router-link>
<!-- 6、定义锚点 -->
<router-view></router-view>
</div>
这样我们就只会保存添加了replace的页面记录，其他的页面就不能通过浏览器的返回上一个页面而访问到了。
二、nodeJs环境搭建
2.1 Node.js是什么
① Node.js是一个基于Chrome V8引擎的[JavaScript运行环境]；
② Node.js是JavaScript脚本语言程序的运行环境。
npm：是nodeJS的包管理工具，相当于后台的maven
2.2 配置NodeJS环境
配置步骤如下：
1、配置系统变量：
2、新建一个NODE_HOME系统变量
3、把这一串配置到Path中：
%NODE_HOME%;%NODE_HOME% ode_global
这里要**注意：**如果系统配置是一条条分开的，那就要把%NODE_HOME%;单独分开配置；
测试是否配置成功：
Windows + R，输入cmd
nodeJs配置成功
然后我们再输入npm -v，查看npm的版本：
2.3 下载github的Vue项目
① 下载github的Vue的项目解压
在解压的项目中是没有node_modules的，
在工程的根目录下输入cmd，通过npm install进行再次依赖下载（package.json）
下载成功
② 最后一步就是输入npm run dev，运行项目；
然后就跳到了登录页面，这也就代表我们的nodeJS环境搭建成功。
输入信息全部不为空就OK，登录成功后的主页面：
总结nodeJS环境搭建步骤：
1、下载nodeJS的安装包
2、解压nodeJS的解压包，在根目录下新增两个文件夹node_global和node_cache
3、配置环境变量
NODE_HOME:配置的是nodeJS解压的根路径E:AnZhuangBaoNodeJs ode-v10.15.3-win-x64
path:%NODE_HOME%;%NODE_HOME% ode_global
node -v
npm -v
4、配置npm的全局模块的下载地址
npm config set cache “E:AnZhuangBaoNodeJs ode-v10.15.3-win-x64 ode_cache”
npm config set prefix “E:AnZhuangBaoNodeJs ode-v10.15.3-win-x64 ode_global”
npm config set registry https://registry.npm.taobao.org/
5、下载github的Vue的项目解压
6、在解压的项目中是没有node_modules的，在工程的根目录下需要通过npm install进行再次依赖下载（package.json）
7、在通过npm run dev 启动项目
OK，以上就是今天Leaf带来的关于Vue路由的使用、以及nodeJS环境的搭建的知识分享。
最后
深知大多数初中级Java工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《Java开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
小编已加密：aHR0cHM6Ly9kb2NzLnFxLmNvbS9kb2MvRFVrVm9aSGxQZUVsTlkwUnc==出于安全原因，我们把网站通过base64编码了，大家可以通过base64解码把网址获取下来。
3588
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
