路由的基本使用(一)

1.安装vue-router

npm i vue-router@3  // vue2安装3版本；vue3不用指定版，本安装的是4版本

2.应用插件

main.js

import VueRouter from 'vue-router'            // 引入路由插件

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

3.创建应用路由器的组件

router/index.js

import VueRouter from 'vue-router'

import Home from '...'

export default new VueRouter ({

        routes:[

                {

                        path:'/home',

                        component: Home

                },

                {}

        ]

})

main.js

import router from './router'

new vue({

        el:'App',

        render: h => h(App),

        router:router

})

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

<router-link active-class="active" to="/home">Home</router-link>

5.指定展示位置

<router-view></router-view>

总结：点击侧边栏 -> 路径发生变化 -> router实时监控路径的变化 -> 根据路径进行匹配相应的组件

注意点：

1.切换路由组件，默认是被销毁的，需要的时候再去挂载

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

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