1.项目准备

1.先安装全局环境  npm i -g vue-cli   这个是全局环境，只需要安装一次即可

2.建立自己的项目  vue init webpack my    建立一个名为my的项目，这里使用的是官方版本，各种配置都已经配好，适合初学

3.根据提示 cd my 进入项目，然后 npm run dev 启动项目，在本地浏览器里输入localhost：8080，即可看到一个搭建好的简单的项目

2.src目录

1.写项目需要建立的组件，路由和静态资源都在src目录文件下。

2.assets存放静态资源，components存放组件，router存放路由配置文件。

3.还有一个App.vue和main.js文件，主要是把App文件作为一个总组件，里面有一个<router-view  />作为容器，盛放其他组件。这个里面的<template></template>里的东西和样式基本可以删了，只留外面一个<div></div>和一个容器即可。

4.components文件下有一个HelloWorld.vue文件，结构与APP.vue一样，也可以都删掉只留一个<div></div>即可。可以在这里写一个标题<h1>hello</h1>，回到浏览器里刷新就可以看到一个标题hello。

5.router下的index.js就是路由规则配置，决定这组件之间的关系。

3.路由规则配置

1.先在component下新建一个vue文件，写上如下代码

<template><!-- 组件 -->
	<div> <!-- 只能有一个否则将会报错 -->
		<h1>main</h1>
	</div>
</template>
<script>
	export default {   //将文件暴露出去,方便接收配置
		name:'Main'
		
	};
</script>
<style>
	
</style>

2.回到index.js里引入并进行路由配置

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Main from '@/components/Main'  //引入文件

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
	{
		path: '/main',    //路由名称
		name: 'Main',
		component: Main    //对应的组件
	}
  ]
})

这是helloword与main之间是并列关系，根据手动路径可以看到两个组件

                    

3.手动太麻烦，可以通过写一个链接，在hello界面里到面界面里，main界面类似

<router-link to="/main" tag="button">main界面</router-link>
<!-- to后跟的是路径，tag是指将这个标签转换为button，否则会默认为a标签 -->

               

4.父子路由

将上面的路由规则配置成父子规则，只需要写在children里即可，并在父组件里写上容器来盛放子组件<router-view></router-view>

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
			children:[{
			path: '/main',    //路由名称
			name: 'Main',
			component: Main    //对应的组件
		}]
    }
		
  ]
})

<template>
  <div class="hello">
    <h1>hello</h1>
		<router-link to="/main" tag="button">main界面</router-link>
		<!-- to后跟的是路径，tag是指将这个标签转换为button，否则会默认为a标签 -->
		<hr />  <!--区分父子路由-->
		<router-view></router-view>
  </div>
</template>

点击跳转，走子路由，将会把子组件放到父组件里，

5.最后在写页面的时候一定要先规划好路由规则，否则后面传参会很麻烦