vue-router的配置与简单使用。（初阶）

什么是vue-router？

因为vue是一个适合做SPA单页面的 框架，所以要实现（模拟）页面（组件）切换，就需要vue-router这个插件,而vue-router 这个插件并不是vue本身自带的东西，而是类似于第三方库的一种存在，所以在使用vue-router 之前需要去安装vue-router这个插件，又因为它是一个插件，所以需要安装在vue上，则使用vue.use 这个API 将插件安装到vue上。这样就可以在vue项目里面使用vue-router了

 import Vue from 'vue'
 import App from './App.vue'
 import VueRouter from 'vue-router'
 Vue.use(VueRouter)
 new Vue({
   render: h => h(App),
 }).$mount('#app')

如何使用vue-router？

先将vue-router安装到vue上，可以打造一个单独的路由模块（推荐），也可以在main.js主入口文件里面直接定义，通常都是打造一个单独的router模块，在这个模块里面，需要导出一个vue-router的实例。并且在main.js里面引入这个实例，建议在引入的时候变量名字起router 这样就可以在new vue 实例身上的对象里面的router这个属性挂载vue-router的实例的时候直接挂载router 。而不用router：XXX ，回到router模块里面接着说， 在这个模块里面需要导入两个必须的包，一个是vue 一个是vue-router 将vue-router 安装在vue上。 然后new一个 vue-router实例，这个实例接受一个options这个options 是一个对象。这个对象里面有几个属性，分别是routes（路由配置的规则）mode（路由模式，默认是hash路由，可以不写。）linkActiveClass（路由激活的class名字，可以不写。）而routes是一个数组套对象的形式出现的，其中每一个对象就是一个配置规则，这个对象里面有path：匹配的路径，component：路径匹配到展示的组件，组件需要提前引入，name：命名路由，redirect：路由重定向，就是匹配到某个path的时候重定向另一个path，children：子路由，就是路由嵌套的时候使用，在children里面也是一个数组加对象的呈现。

// 在主入口使用路由  main.js  
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
let routes = [  // 打造路由规则
{
 name:'a',     // 命名路由
 path:'/a',    // 匹配到 /a 这个路径
 component:require('./components/A.vue')   // 展示 A 页面 
}
]

let router = new VueRouter({    // 打造路由实例
routes                       //传入options 的routes 
})

new Vue({
render: h => h(App),
router                     // 挂载路由

}).$mount('#app')

打造路由模块 （推荐 ）
首先打造一个router.js

import Vue from 'vue'     //引入vue
import VueRouter from 'vue-router'   引入 vue-router
Vue.use(VueRouter)   //安装vuerouter 
import A  from '../components/A.vue'  // 引入A页面
import B  from '../components/B.vue'  // 引入B页面
import Nopage  from '../components/Nopage.vue'   // 引入找不到路径的时候展示的页面 

let routes = [     // 打造路由规则
    {
        name:'a',     // 命名路由
        path:'/a',   // 匹配路径 
        component:A,  // 展示页面  
        props:(route) => {     //  路由props 
            console.log(route);     
            
            return  {
                 ...route.params
              } 
        },

    },
    {
        name:'b',
        path:'/b',
        component:B
    },
    {
        path:'/',          //匹配到 / 
        redirect:'/a',    // 重定向到 /a      
    },
    {
        path:'*',         // 上面所有路径都找不到
        component:Nopage   // 展示丢失页面
    },
]
let router = new VueRouter({      // 打造路由实例
    routes,
    linkActiveClass:'sss'     //  定义激活时候的class 名字 
  
})
export default router    //  导出路由实例

在组件中使用路由

div>
    APP组件
    <router-link to="/a">展示A页面</router-link>     
    <br />
    <router-link  to="/b" >展示B页面</router-link>
    <router-view></router-view>            // 占位，显示匹配到路径的组件    
  </div>

以上就是路由的简易使用，大家如果有问题欢迎在评论区留言哦。喜欢博主的可以点点关注。