vue-router 的使用和实现原理

最新推荐文章于 2024-09-21 17:30:00 发布

charismajae

最新推荐文章于 2024-09-21 17:30:00 发布

阅读量1.1k

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/charismajae/article/details/82683464

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

面试的时候被问到过,在网上看到的一篇博客讲解,方便自己学习
前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。改变浏览器地址而不向服务器发出请求有两种方式:
1.一种是# hash
2.一种是h5的history

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

利用 Vue.js 提供的插件机制 .use(plugin) 来安装 VueRouter

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import City from '@/pages/city/City'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/city',
      name: 'City',
      component: City
    }
  ]
})