vue的路由以及nodeJS环境搭建

目录

一：路由

1、确保引入Vue.vue-router的js依赖

2、首先需要定义组件（就是展示不同的页面效果）

3、需要将不同的组件放入一个容器中（路由集合）

4、将路由集合组装成路由器

5、将路由挂载到Vue实例中

6、定义锚点

7、跳转

效果演示：

二：无痕浏览

三：环境搭建

2、解压nodeJS的解压包，在根目录下新增两个文件夹node_global和node_cache

 3、配置环境变量

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

 5、下载github的Vue的项目解压

 6、在解压的项目中是没有node_modules的

7、在通过npm run dev 启动项目

---

一：路由

1、确保引入Vue.vue-router的js依赖

<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>

2、首先需要定义组件（就是展示不同的页面效果）

//2.定义需求中需要的组件
		// const也是es6写法，代表了该变量是对象
		const Home = Vue.extend({
			template:"<div><p>这是博客内容页面</p><div>具体的博客内容</div></div>"
		});
		const Abort = Vue.extend({
			template:"<div><p>这是关于本站的页面</p><div>本站的意义，发展史，未来的规划</div></div>"
		});

3、需要将不同的组件放入一个容器中（路由集合）

// 3.定义路由跳转路径
		let routes = [{
				path:'/',
				component:Home
			},{
				path:'/Home',
				component:Home
			},{
				path:'/Abort',
				component:Abort
			}];

4、将路由集合组装成路由器

// 4.得到路由对象
			const router = new VueRouter({routes:routes});

5、将路由挂载到Vue实例中

// 5.将路由与Vue实例进行绑定
			router,

6、定义锚点

<!-- 6定义组件存放的位置 ，定义锚点-->
		<router-view></router-view>

7、跳转

<!-- 7.路由组件跳转触发点 -->
		<router-link to="/">首页</router-link>
		<router-link to="/Abort">关于本站</router-link>