第一步在.vue组件里添加标签，格式如下

<div id="app">
<p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定在main.js文件设置的别名链接，如/1 -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/1">Go to Foo</router-link>
</p>
<!-- 路由出口 -->
<!-- 点击<router-link>的时候指定的页面将渲染在这里 -->
<router-view></router-view>
</div>

第二步在main.js文件里配置路由，格式如下

import VueRouter from 'vue-router'

// 1. 定义（路由）组件。
// 加载组件
import Page01 from './max'

Vue.use(VueRouter)
//全局安装路由功能

// 2. 定义路由
// 每个路由应该映射一个组件。 
const routes = [
  { path: '/1', component: Page01 } 
  //前面to指定的地方 path  /1
]

// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
  routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  router
})

// 现在，就可以重启试试了！

注意 routes 和 router 是不一样的单词，别眼花了

路由就是这么的简单！

第二种方法：

<div class="st">
	<!-- <router-link to="/newPage">指向主页面跳转</router-link><br/> -->
	<!-- 点击<router-link>的时候指定的页面将渲染在这里 -->
	<router-view></router-view>
	<div class="usern" @click="naveTO">DIV跳转</div><br/>
</div>
export default{
		
	methods : {	  naveTO(){//页面跳转
		console.log("DIV跳转");
		 if ('/newPage' === -1) {
			window.history.back()
			return
		}
		if (/^javas/.test('/newPage') || !'/newPage') return
		const useRouter = typeof '/newPage' === 'object' || (this.$router && typeof '/newPage' === 'string' && !/http/.test('/newPage'))
		if (useRouter) {
			this.$router.push({path: '/newPage'})
		} else {
			window.location.href = '/newPage'
		}    
	}

然后是在父组件里向子组件里传值，格式如下