# vue的路由及简单显示

Vue中会使用官方提供的vue-router插件来使用单页面，原理就是通过检测地址栏变化后将对应的路由组件进行切换（卸载和安装）

如何使用路由（router）

1.安装依赖

npm install vue-router -g

2.创建组件

引入vue-router，如果是在脚手架中，引入VueRouter之后，需要通过Vue.use来注册插件

src/router/index.js文件

import Vue from 'vue'
import Router from 'vue-router//引入vue-router
Vue.use(Router) //Vue全局使用Router

3.创建router路由器

new Router({
routes:[
{path:"/home", //链接路径

​ component:Home //对应的组件模板

​ }
​ ]
​ })

​ 4.创建路由表并配置在路由器中

    var routes = [
        {path,component}//path为路径，component为路径对应的路由组件
    ]

    var router = new Router({
        routes
    })
    
    export default router

​ 5.在根实例里注入router,目的是为了让所有的组件里都能通过this.$router、this.$router、this.route来使用路由的相关功能api

import router from "./router"
new Vue({
  el: '#app',
  router,  //注册一下  让组件可以通过this.$router or this.$route 使用路由相关的api属性或方法
  template: '<App/>',
  components: { App }
})

6.利用router-view来指定路由切换的位置

7.使用router-link来创建切换的工具，会渲染成a标签，添加to属性来设置要更改的path信息，且会根据当前路由的变化为a标签添加对应的router-link-active/router-link-exact-active（完全匹配成功）类名

main
news

.router-link-active{
color:red;
}

路由的懒加载

像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时

{
path: ‘/about’,
name: ‘about’,
component: () => import(’@/views/About’) //采用了路由懒加载方式
}