<template>
  <div id="app">
      主页面
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>

</style>

3. 下载vue-router组件

npm install vue-router

4. 在src下创建一个router的文件夹

1、模版页面跳转

1. 在components文件夹创建一个login.vue文件和list.vue

<template>
  <div id="login">
    登录界面
  </div>
</template>

<script>
  export default {
    name: 'login'
  }
</script>

<style>

</style>

<template>
  <div id="list">
    列表页面
  </div>
</template>

<script>

  export default {
    name: 'list'
  }
</script>

<style>

</style>

2. 在router文件夹创建一个index.js，因为index命名的文件为默认文件，所以我们以它为router的配置文件

//配置Vue-Router
//1、导入相关模块组件和要使用到的component模块，一般默认开头大写为组件
import Vue from 'vue'
import VueRouter from 'vue-router'

import Login from '../components/login'
import List from '../components/list'

//2、安装路由
Vue.use(VueRouter);

//3、导出路由给其它文件使用
export default new VueRouter({
  routes:[
    {
      //路径
      path:'/login',
      //组件名称
      name:'loginView',
      //跳转去到的组件
      component:Login
    },
    {
      path:'/list',
      name:'listView',
      component:List
    }
  ]
})

3. 在src/main.js添加刚刚写router/index.js模块依赖

import Vue from 'vue'
import App from './App'
//1、添加刚刚写router/index.js模块依赖
import Router from './router/index'

Vue.config.productionTip = false


new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  router:Router//2、配置路由
})

4. 在主页面添加<router-link></router-link>和<router-view></router-view>标签

<template>
  <div id="app">
      主页面
    <router-link to="/login">登录</router-link>
    <router-link to="/list">列表</router-link>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>

</style>

5. 总结
   路由跳转有四步：
   （1、）写好componet页面
   （2、）配置只好路由的index.js配置文件
   （3、）在页面对应的js文件中导入路由，并且配置路由
   （4、）在vue页面天啊及<router-link></router-link>和<router-view></router-view>标签

2、路由嵌套

1. 在components文件夹创建一个userMessage.vue文件updateUserMessage.vue

<template>
  <div id="userMessage">
    个人用户信息展示页面
  </div>
</template>

<script>
  export default {
    name: 'userMessage'
  }
</script>

<style>

</style>

<template>
  <div id="updateUserMessage">
    个人用户信息更新页面
  </div>
</template>

<script>
  export default {
    name: 'updateUserMessage'
  }
</script>

<style>

</style>

2. 修改router/index.js文件，添加嵌套路由

//配置Vue-Router
import Vue from 'vue'
import VueRouter from 'vue-router'

import Login from '../components/login'
import List from '../components/list'
import UpdateUserMessage from '../components/updateUserMessage'
import UserMessage from '../components/userMessage'


Vue.use(VueRouter);

export default new VueRouter({
  routes:[
    {
      path:'/login',
      name:'loginView',
      component:Login
    },
    {
      path:'/list',
      name:'listView',
      component:List,
      //添加嵌套组件
      children: [
        //格式和之前的一样
            {
              path: '/updateUserMessage',
              name: 'updateUserMessageView',
              component: UpdateUserMessage
            },
            {
              path: '/userMessage',
              name: 'userMessageView',
              component: UserMessage
            }
      ]
    }
  ]
})

3. 给要嵌套的组件添加<router-view></router-view>标签

<template>
  <div id="list">
    列表页面
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'list'
  }
</script>

<style>

</style>

4. 总结:
   （1、）写好对应的子页面
   （2、）给router/index.js中需要嵌套的路由添加children属性
   （3、）给要嵌套的页面添加上要<router-view></router-view>标签