第七章、路由

1、基本使用

1、安装插件

1、vue-router

npm i vue-router@3

2、注意vue2对应的版本是router3，vue3对应的版本是router4

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>

5、注意

1. 路由组件通常存放在pages`文件夹，一般组件通常存放在`components文件夹。
2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
3. 每个组件都有自己的$route属性，里面存储着自己的路由信息。
4. 整个应用只有一个router，可以通过组件的$router属性获取到。