基本路由的使用

路由

1. 理解：一个路由(route)就是一组映射关系(key-value)，多个路由需要路由器(router)进行管理。
2. 前端路由：key是路径，value是组件。

1.基本使用

1. 安装vue-router 命令npm i vue-router(如果是vue2的项目，加上@3）
2. 应用插件:Vue.use(VueRouter)
main.js

import Vue from 'vue'
import App from './App.vue'
// 引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'
//应用插件
Vue.use(VueRouter)
//关闭Vue的生产插件
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
  },
  router:router
}).$mount('#app')

4. 编写router配置项

//该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入路由组件
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

4. 实现切换(active-class可配置高亮样式)
   <router-link active-class="class" to="/about">About</router-link>
5. 指定展示位置
   <router-view></router-view>

2.几个注意点

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