Vue路由&&无痕浏览 – nodeJs环境搭建

目录

音视频

一、Vue路由

Layer0扩容

        1.1 路由的使用步骤

软件启动报错

        1.2 无痕浏览

前后端分离酒店管理系统

二、nodeJs环境搭建

渲染

        2.1 Node.js是什么

GB28181

        2.2 配置NodeJS环境

Linux文件系统与命令

        2.3 下载github的Vue项目

二极管


一、Vue路由

        1.1 路由的使用步骤

① 引入路由的js

② 定义组件

数据集

③ 定义路由与组件的对应关系

任务调度

④ 生成路由对象

hdfs

⑤ 将vue对象挂载到vue实例中

https抓包

⑥ 定义锚点

嵌入式硬件

⑦ 定义触发的事件

鏁版嵁鍒嗘瀽

        Leaf这里就直接放上整个页面代码,都写好了实现步骤;

stm32

<!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>

         我们测试一下是否成功:

实例分割

        点击首页

srio

in

        点击关于

opengl es

mysql 索引优化

        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的页面记录,其他的页面就不能通过浏览器的返回上一个页面而访问到了。 

exception

Python入门学习


二、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%\node_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:\AnZhuangBao\NodeJs\node-v10.15.3-win-x64

path:%NODE_HOME%;%NODE_HOME%\node_global

node -v

npm -v

4、配置npm的全局模块的下载地址

npm config set cache "E:\AnZhuangBao\NodeJs\node-v10.15.3-win-x64\node_cache"

npm config set prefix "E:\AnZhuangBao\NodeJs\node-v10.15.3-win-x64\node_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环境的搭建的知识分享。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注