概念

路由：控制组件之间的跳转，不是先请求不用刷新页面，直接跳转/切换组件

配置

/src/router/index.js

• 引入

    import Vue from 'vue'
     
    import Router from 'vue-router'
  

• 注册

    Vue.use(Router)
  

• 引入路由对应的组件地址

   import component from '@/components/Home'
    
   import Home from '@/components/Content’
  

配置路由

import Home from '@/components/Home';
Vue.use(Router)

export default new Router({

mode:'history',
  routes: [
    //默认路径下显示该路由
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld //组件名称，这个路由对应跳转的组件
    },{
      path: '/home',
      name: 'Home',
      component: Home
    }
  ]
})
- 上面已经配置了两个路由，当打开 http://localhost:8080 或者 http://localhost:8080/home 的时候，就会在 <router-view> 中渲染 home.vue 组件
-  Home相当于是这个页面的主界面，其他的页面都是嵌套在这个页面里面的，所以有动态变化的地方都要有<router-view>
- 如果被嵌入的页面部分下还有下一级页面，则需要在一级路由中嵌套二级路由，修改router/index.js

• 在创建的 router 对象中，如果不配置 mode，就会使用默认的 hash 模式，该模式下会将路径格式化为 #! 开头

• 添加 mode: ‘history’ 之后将使用 HTML5 history 模式，该模式下没有 # 前缀，而且可以使用 pushState 和 replaceState 来管理记录

• App.vue作为一个存放组件的入口容器，其中 < router-view> 是用来渲染通过路由映射过来的组件，当路径更改时，< router-view> 中的内容也会发生更改

    routes: [
      //默认路径下显示该路由
      {
        path: '/',
        name: 'home',
        component: Home,
        children:[
          {path:'/',
           component:Login
          }
        ]
      },{
        path: '/hello',
        name: 'helloWorld',
        component: HelloWorld
      }
    ]
    - 在配置的路由后面，添加 children，并在 children 中添加二级路由，就能实现路由嵌套
    - 配置 path 的时候，以 " / " 开头的嵌套路径会被当作根路径，所以子路由的 path 不需要添加 " / "
  

配置main.js

在main.js中调用index.js的配置

	import router from './router'

App.vue页面使用（展示）路由

	<router-view></router-view>

路由切换

<router-link  to="/">切换到Home组件</router-link>
 
<router-link  to="/content">切换到Content组件</router-link>

动态路由配置

• 使用场景：需要把某种模式匹配到的所有路由，全都映射到同个组件（例如：我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染）
• 在 vue-router 的路由路径中使用动态路径参数
• 一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用

完成配置实例

src/router/index.js

1 import Vue from 'vue'
 2 import Router from 'vue-router'
 3 import Home from '@/components/Home'
 4 import Content from '@/components/Content'
 5 import About from '@/components/About'
 6 import Submit from '@/components/Submit'
 7 
 8 Vue.use(Router)
 9 
10 export default new Router({
11   routes: [
12     {
13       path: '/',
14       name: 'Home',
15       component: Home
16     },
17     {
18       path: '/content',
19       name: 'Content',
20       component: Content
21     },
22     {
23         path: '/about',
24         name: 'About',
25         component: About
26     },
27     {
28         path: '/submit',
29         name: 'Submit',
30         component: Submit
31     }
32   ],
33   mode: "history"//干掉地址栏里边的#号键
34 })

src/router/index.js(router的主要配置文件)

main.js

1 // The Vue build version to load with the `import` command
 2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 import Vue from 'vue'
 4 import App from './App'
 5 import router from './router'
 6 import VueResource from 'vue-resource'//从node_modules里边把vue-resource引入进来，同引入vue文件和引入vue-router一个道理
 7 
 8 Vue.config.productionTip = false;
 9 Vue.use(VueResource)
10 
11 //这样以后，就可以在任何组件页面中使用http了
12 /* eslint-disable no-new */
13 new Vue({
14   el: '#app',
15   router,//引用router
16   template: '<App/>',
17   components: { App }
18 })

App.vue展示Vue

1 <template>
 2   <div id="app">
 3     <app-header></app-header>
 4     <app-nav></app-nav>
 5     <!-- 展示router -->
 6     <router-view></router-view>
 7     <app-footer></app-footer>
 8   </div>
 9 </template>
10 
11 <script>
12   import Header from './components/Header'
13   import Footer from './components/Footer'
14   import Navbar from './components/Navbar'
15   export default {
16     name: 'app',
17     data () {
18       return {
19         
20       }
21     },
22     components: {//局部注册组件这里，可能会定义多个组件，所以component这个单词加上“s”
23       "app-header": Header,
24       "app-footer": Footer,
25       'app-nav': Navbar
26     }
27   }
28 </script>
29 
30 <style>
31   
32 </style>

导航页面的路由链接设置，用于切换组件

1 <template>
 2     <nav class="app-nav">
 3         <ul class="ul-father">
 4             <li class="li-father" v-for="item in arr" v-on:mouseover="item.show = ! item.show" v-on:mouseout="item.show = ! item.show" v-bind:class="{bgchange: item.show}">
 5             <!-- 路由切换组件 -->
 6                 <router-link v-bind:to="item.url">
 7                     {{ item.title }}
 8                 </router-link>
 9                 <template v-if="item.value">
10                     <ul class="ul-child" v-show="item.show">
11                         <li class="li-child" v-for="x in item.value">
12                             <a href="javascript:;">
13                                 {{ x }}
14                             </a>
15                         </li>
16                     </ul>
17                 </template>
18             </li>
19         </ul>
20     </nav>
21 </template>
22 <script>
23     export default {
24         name: "app-nav",
25         data (){
26             return {
27                 arr: [
28                     {
29                         title: "首页", 
30                         value: ["一","二","三","四"],
31                         url: "/",
32                         show: false
33                     },
34                     {
35                         title: "新闻" ,
36                         value: ["二","二","三","四"],
37                         url: "/content",
38                         show: false
39                     },
40                     {
41                         title:  "关于",
42                         url: "/about"
43                     },
44                     {
45                         title: "投稿",
46                         url: "/submit"
47                     }
48                 ]
49             }
50         }
51     }
52 </script>
53 <style scoped>
54     .app-nav{
55         margin-bottom: 20px;
56     }
57     ul.ul-father {
58       background: Lightgreen;
59       margin: 0;
60     }
61     .li-father {
62         position: relative;
63         display: inline-block;
64         width: 20%;
65       margin: 0;
66     }
67     li a {
68         display: block;
69       padding: 15px 0;
70       color: #333;
71       text-decoration: none;
72     }
73     li a:hover,.bgchange>a{
74         color: #fff;
75         background: #222;
76     }
77     .ul-child{
78         position: absolute;
79         top: 51px;
80         left: 0;
81         width: 100%;
82         background: Lightgreen;
83     }
84 </style>