一、基本路由

1、基本使用

（1）安装vue-router,命令 npm i vue-router

（2）应用插件：Vue.use(VueRouter)

在main.js文件中修改：

  import Vue from 'vue'
  import App from './App.vue'
  //引入插件
  import VueRouter from 'vue-router'
  //引入路由器
  import router from './router'

  Vue.config.productionTip = false
  //应用插件
  Vue.use(VueRouter)

  new Vue({
    router,
    render: h => h(App),
  }).$mount('#app')

（3）编写router配置项:

新建router文件夹：下面新建index.js文件

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";

//引入组件
import MyAbout from '../components/MyAbout'
import MyHome from '../components/MyHome'


//创建并暴露路由器
export default new VueRouter({
   routes:[
      {
          path:'/about',
          component:MyAbout
      },
      {
        path:'/home',
        component:MyHome
          
    }
   ]
})

4、实现切换（active-class可配置高亮样式）

<router-link class="list-group-item " active-class="active" to="/about">About</router-link>

5、指定展示位置

<router-view> </router-view>

 二、几个注意点

1、路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹

2、通过切换，隐藏了的路由组件，默认是被销毁掉的，需要的时候再去挂载

3、每个组件都有自己的$route属性，里面存储着自己的路由信息

4、整个应用只有一个router，可以通过组件$router属性获取到

三、嵌套（多级）路由

1、配置路由规则，使用children配置项

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";

//引入组件
import MyAbout from '../components/MyAbout'
import MyHome from '../components/MyHome'
import MyNews from '../components/MyNews'
import MyMessages from '../components/MyMessages'

//创建并暴露路由器
export default new VueRouter({
   routes:[
      {
          path:'/about',
          component:MyAbout
      },
      {
        path:'/home',
        component:MyHome,
           children:[  //嵌套路由
               {
                   path:'news',  //不需要加斜杠
                   component:MyNews
               },
               {
                   path:'messages',
                   component:MyMessages
               }
           ]
    }
   ]
})

   2、跳转（要写完整路径）

<router-link class="list-group-item active" to="/home/news">News</router-link>                 

完整代码 

嵌套路由实现界面：

App.vue:

<template>
   <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <!-- 原始html中我们使用a标签实现页面的跳转 -->
          <!-- <a class="list-group-item active" href="./about.html">About</a>
          <a class="list-group-item" href="./home.html">Home</a> -->

           <!-- Vue中借助router-link标签实现路由的切换 -->
          <router-link class="list-group-item " active-class="active" to="/about">About</router-link>
          <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>

        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <!-- 此处到底展示什么组件，要看用户点击哪个导航项 -->
            <!-- 指定组件的呈现位置 -->
            <router-view> </router-view>
          </div>
        </div>
      </div>
    </div>
  </div>


</template>

<script>


export default {
  name: 'App',
  components: {
      
  },

}
</script>

 MyAbout.vue

<template>
     <h2>我是About的内容</h2>
</template>

<script>
export default {
    name: 'MyAbout'

}
</script>

MyHome.vue

<template>
<div>
    <h2>Home组件内容</h2>
    <div>
    <ul class="nav nav-tabs">
        <li>
             <!-- 多级路由注意路径 -->
        <router-link class="list-group-item active" to="/home/news">News</router-link> 
        </li>
        <li>
        <router-link class="list-group-item " to="/home/messages">Message</router-link>
        </li>
    </ul>
        <router-view></router-view>
    </div>
</div>
</template>

<script>
export default {
    name: 'MyHome'


}
</script>

 MyMessages.vue:

<template>
<div>
    <ul>
    <li>
        <a href="/message1">message001</a>&nbsp;&nbsp;
    </li>
    <li>
        <a href="/message2">message002</a>&nbsp;&nbsp;
    </li>
    <li>
        <a href="/message/3">message003</a>&nbsp;&nbsp;
    </li>
    </ul>
</div>
</template>

<script >
export default {
    name: "MyMessages",
}
</script>

MyNews.vue:

<template>
<ul>
    <li>news001</li>
    <li>news002</li>
    <li>news003</li>
</ul>

</template>

<script >
export default {
    name: "MyNews",
    data() {
        return {}
    },
    components: {},
    methods: {}
}
</script>

<style >

</style>