VUE学习22：vue-router路由安装和使用教程

路由router就是key-value的对应关系，vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。

路由router 就是key-value的对应关系

vue-router 是 vue.js 官方给出的路由解决方案

vue-router 只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换

一、安装vue-router

1、VUE3安装命令（VUE-router4，只能用在VUE3中）

npm i vue-router

2、VUE2安装命令（VUE2使用的版本）

npm i vue-router@3

二、卸载vue-router

npm uninstall vue-router

完全删除它，包括依赖项

npm uninstall vue-router --save  

二、使用vue-router

1、main.js引入路由

// 引入VueRouter
import VueRouter from 'vue-router'

// 应用插件
Vue.use(VueRouter)

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

2、编写router配置项

//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
import About from '../components/About'
import Home from '../components/Home'

//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})

//暴露router
export default router

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

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

4、指定展示位置

<router-view></router-view>

三、几个注意点

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

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

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

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