vue-router配置介绍和使用方法（一）

---

---

1. vue-router配置流程概述：

1) 准备工作：

• 建立vue.js项目文件夹，通过cmd命令，完成新建文件夹的相关项目配置（具体操作，请参考“如何进行 node.js的 安装与卸载 ”）；
• vue init webpack 项目文件名
• 接着按要求配置Project name、author、vue-router（选择Yes）等等相关参数
• cd 项目文件名
• npm install
• npm run dev

2) 在main.js文件中，进行关于（首页）主体文件（App.vue）的基础配置：

• 引入Vue主体

• 引入vue-router主体

• 引入一个个link路由对象：

  • 在main.js文件中，创建路由对象并配置路由规则（如下绿色加粗代码）：

    	let router = new VueRouter({
    			//routes
    			routes: [
    			//component后面是一个个link对象
    				    {path: '/home',name: 'app',component: Home},
    				    {path: '/hello',name: 'app',component: HelloWorld}
    		  ]
    	});
    	// 注意：单词拼写是： ```component```, 不加 ```s```！
    

• 安装插件vue-router（挂载属性） ，如右侧代码：Vue.use(VueRouter);

3) 建立相关路由文件夹，及相关路由文件（类如home.vue/about.vue文件）

4) 留坑，在app.vue文件中留坑，如右侧代码： <router-view></router-view>

5) new Vue 启动 ，如右侧代码：new Vue({ •••省略••• });

6) 最后浏览器查看下实时效果。

---

效果图预览：

---

2. 文件目录结构预览：

---

3. 相关代码，参看如下：

main.js文件

import Vue from 'vue';
import VueRouter from 'vue-router';
//引入主体（页面初始化显示）
import App from './components/app.vue';
//一个个link对象 - 分类
import Home from './components/home.vue';
import HelloWorld from '@/components/HelloWorld';

//安装插件
Vue.use(VueRouter);//挂载属性

//创建路由对象并配置路由规则
let router = new VueRouter({
	//routes
	routes: [
	//一个个link对象
    {path: '/home',name: 'app',component: Home},
    {path: '/hello',name: 'app',component: HelloWorld}
  ]
});

/* new Vue 启动 */
new Vue({
  el: '#app',
  render: c => c(App),
  //让vue知道我们的路由规则
  router:router,//可以简写为router
})

app.vue文件

<template>
  <div>
  	<!--留坑，非常重要-->
		<router-view></router-view>		
  </div>
</template>

<script>
	export default {
	  data(){
	  	return{
	  		
	  	}
	  },
	  methods:{
	  	
	  }
	}
</script>

<style scoped>	
</style>

home.vue文件

<template>
	<div>
		我是主页
	</div>
</template>

<script>	
</script>

<style scoped>	
</style>

---

以上就是关于“vue-router配置介绍和使用方法（一）”的全部内容。