vue-router是vue全家桶之一，对于构建单页面应用非常简单。

1. 引入方式
2. 路由配置
3. 动态路由
4. 动态路由参数获取

两种使用方式：

CDN引入：直接使用

<script src='https://unpkg.com/vue-router/dist/vue-router.js'></script>

NPM下载：需要配置

npm install vue-router -S // 或者 --save

通过插件形式安装（会自动给您配置好）：

vue add router

在vue-cli3.0中路由配置：（当然也可以在安装vue-cli时，勾选vue-router，脚手架会自动帮你配置好）

html的配置：

<!--在使用vue-cli3.0搭建基础框架时，如果你勾选vue-router，cli会帮你自动配置好路由， -->
<!--router-link和router-view通常会在app.vue文件中(也叫根组件)，当然你可以根据业务需求来定义位置 -->
<template>
    <div id='app'>
        ···
        <!-- <router-link>默认会被渲染成一个a标签 -->
        <router-link to='/pathName'>点击跳转<router-link>
        <router-view /> <!-- 路由出口，路由匹配的组件会渲染在这里 -->
    </div>
</template>

创建router.js文件，配置路由

//创建router.js文件
//引入vue和路由
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter) 

//创建路由实例，配置路由
const router = new VueRouter({
    routes:[
        // 组件懒加载： {path: '/pathName', component: () => import('./path')} 访问到时才加载
        {path:'/pathName',component:componentName},
    ··· ···
    ]
});
//导出路由，挂载到Vue实例
export default router;

在main.js中，把路由挂载到根实例

//main.js文件
//引入创建的路由文件
import router from './router'
const vm = new Vue({
    router, //相当于router：router，ES6的简写，把路由挂载到根实例中，这样所有的组件都可以使用路由
    render:h=>h(App) //把组件App转化为虚拟dom
}).$mount('#app')

以上就是vue-router的配置，你也可以参照官方文档给出的一个详细的案例，自己配置下！有任何疑问欢迎留言！！！

 

命名视图

命名视图就是有多个router-view，如果 router-view 没有设置名字，那么默认为 default。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

 一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

 

动态路由

当不同的id对应相同组件时，你可以考虑用动态路由，动态路由就是在路由路径中 "使用动态录井参数"

实际业务中，经常会碰到下边场景，每一个列表对应的详情页板式一样，内容不同，你可以使用动态路由：

在路由配置中，需要添加动态路由的路径以冒号开头

const router = new VueRouter({
    routes:[
        {
            //这是一个可复用的组件
            path:'/detail/:id', //动态路由参数
            component:detail
        }
    ]
})

下边代码，   / detail / id1、  / detail / id2、  / detail / id3  所有的路径都将映射到同一组件（detail组件）

<template>
  <div id="app">
    <!-- 将数据渲染循环渲染到页面，当router-link作为动态路由跳转时，to前边要加【冒号】
        动态参数可以使用字符串拼接的形式添加到路径后边。
 -->
      <div v-for="item in my_data" :key="item.id">
        <router-link :to="'/detail/' +item.id">{{item.name}}</router-link>
      </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  data(){
    return{
    //数据
      my_data:[
        {name:'java',id:'id1'},
        {name:'python',id:'id2'},
        {name:'javascript',id:'id3'}
      ]
    }
  },
  components: {
    detail
  }
}
</script>

detail组件：

<template>
    <div>
        <h1>{{isId}}</h1>
    </div>
</template>

<script>
export default {
    name:'detail',
    computed:{
        isId(){
            return this.$route.params.id
        }
    }
}
</script>

 

获取动态路由参数

动态路由的参数将会被设置到实例中的$route中的params里边，所以动态路由参数可以这样获取：

// 方法一： 
this.$route.params
// 方法二：在路由配置中添加props：true，在组件中，添加props: ['params'],通过this.params来获取
routes: {
    path: '/',
    props: true,
}

注意：

使用路由参数时，如：/detail/1 导航到 /detail/2 ，组件实例会被复用，因为两个路由都渲染了同一个组件，所以，组件的生命周期钩子将不会重复执行，但是比起销毁再创建，组件的复用性显的更加高效。

总结下：

经常犯的几个错误：

1、动态路由冒号前边的斜线未写！！！

{
    path:'/newsOne/:id',
    component:newsOne   
}

2、用 <router-link :to='/path'> 动态跳转时，to前边冒号未写！！！

3、下边写法，path后边的斜线未写！！！

<router-link :to='"/path/"+item.id'>跳转</router-link>