路由配置vue-router

1. 理解：一个路由（route）就是一组映射（key-value），多个路由需要路由器（router）进行管理

2. 前端路由：key是路径，value是组件

1. 基本使用

1. 安装vue-router，命令：npm i vue-router

2. 编写router的配置项

//引入VueRouter
import VueRouter from 'vue-router'
//引入路由组件
import About from '../components/User'
import Home from '../components/Collect'
​
//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
    routes:[
        {
            path:'/user', //父级路由路径前面一定要加“/”
            component:User
        },
        {
            path:'/collect',
            component:Collect
        }
    ]
})
​
//暴露router
export default router

1. 应用vue-router插件

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false
​
//应用vue-router插件
import vueRouter from 'vue-router'
import router from './router'
​
Vue.use(vueRouter)
​
​
​
//创建vm
new Vue({
    el:'#app',
    render: h => h(App),
    router:router//需要加上这个配置项
})

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

<router-link active-class=