vue-router 安装和使用入门教程 - 文章教程

vue-router 安装和使用入门教程

发布于 2021-08-06 字数 983 浏览 1106 评论 0

一、vue-router 安装和使用

1、安装 vue-router

npm install vue-router --save

2、在模块化工程中使用它(因为是一个插件,所以可以通过 Vue.use() 来安装路由功能)
第一步:导入路由对象,并且调用 Vue.use(VueRouter)
第二步:创建路由实例,并且传入·路由映射配置
第三步:在 Vue 实例中挂载创建的路由实例

3、使用 vue-router 的基本步骤
第一步:创建路由组件
第二步:配置路由映射:组件和路径映射关系
第三步:使用路由:通过 <router-link> 和 <router-view>

二、懒加载的方式

方式一、结合 vue 的异步组件和 Webpack 的代码分析:

const Home = resolve => {require.ensure(['../components/Home.vue'],{resolve(require('../components/Home.vue'))})}

方式二、AMD 写法

const About = resolve => require(['../components/About.vue'],resolve)

方式三、在ES6中,我们可以有更加简单的写法来组织 Vue 异步组件和 Webpack 的代码分割

const Home () => import('../components/Home.vue')

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

上一篇:

下一篇:

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2512 文章
30 评论
82725 人气
更多

推荐作者

瑾兮

文章 11 评论 2

carlo_sn

文章 0 评论 0

15867725375

文章 0 评论 0

a3576419

文章 0 评论 0

wendy

文章 0 评论 0