vue学习（49）vue-router(1)

• 明确： 一个路由（route）就是一组映射关系（key - value），多个路由必要路由器（router）进行管理。
  
• 前端路由：key是路径，value是组件。
  
• 根本利用
  
  
  • 安装vue-router，下令：npm i vue-router
    
  • 应用插件：Vue.use(VueRouter)
    
  • 编写router设置项:
    
  
  

//引入VueRouterimport 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        }    ]})//袒露routerexport default router

• 实现切换（active-class可设置高亮样式）
  

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

• 指定展示位置
  

<router-view></router-view>

• 几个注意点
  
  
  • 路由组件通常存放在pages文件夹，一样平常组件通常存放在components文件夹。
    
  • 通过切换，“隐蔽”了的路由组件，默认是被烧毁掉的，必要的时间再去挂载。
    
  • 每个组件都有本身的$route属性，内里存储着本身的路由信息。
    
  • 整个应用只有一个router，可以通过组件的$router属性获取到。