1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue each_Vue.js从零开始——模块化项目(2)

vue each_Vue.js从零开始——模块化项目(2)

时间:2022-04-16 18:20:12

相关推荐

vue each_Vue.js从零开始——模块化项目(2)

今天更新晚了点,因为刚刚去参加面试回来;不多说废话了,今天主要看的是路由,当然因为Vue Router本身已经可以写很多内容了,所以我倾向于把基础内容放在这里,路由单开一部分来详细看看。

1 简单路由

路由是什么呢?

在计算机领域,路由其实就是根据指定好的规则,将一类访问导向至规则对应的地址的动作。

所以网络设备当中有硬件的路由器(其实就是简化版本的计算机,搭配路由软件);而 Vue.js 的路由,允许我们通过不同的URL访问不同的内容,所以原理上是一致的。

如果我们只需要非常简单的路由而不想引入一个功能完整的路由库,可以像这样动态渲染一个页面级的组件:

const

结合HTML5 History API,就可以建立一个麻雀虽小但是五脏俱全的客户端路由器。

官方提供了一个完整的例子:vue-simple-routing-example。

2 第三方路由

如果在接触Vue.js之前已经使用习惯了某路由,也可以很容易的整合到Vue项目当中来,比如Page.js或者Director都是不错的选择,这里有个使用Page.js的范例:

main.js:

import

routes.js(简单的路由):

export

layouts/main.vue(路由主体):

<

components/VLink.vue(链接组件):

<

pages/Home.vue(首页):

<

pages/About.vue(关于页面):

<

pages/404.vue(错误页面):

<

上面这些内容共同组成了这个简单的路由应用,效果如下:

3 官方路由

先来一段官方介绍:

Vue Router是Vue.js官方的路由管理器,它和Vue.js的核心深度集成,让构建单页面应用变得易如反掌。

包含的功能有:

嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于Vue.js过渡系统的视图过渡效果细粒度的导航控制带有自动激活的CSSclass的链接HTML5历史模式或hash模式,在IE9中自动降级自定义的滚动条行为

当然这个有点太官方,其实可以看成就是Node.js专门提供的一个路由组件,我们可以直接拿来用就好。

用Vue.js + Vue Router创建单页应用,是非常简单的,使用Vue.js,我们已经可以通过组合组件来组成应用程序,当要把Vue Router添加进来的时候,我们需要做的是,将组件(components)映射到路由(routes),然后告诉Vue Router在哪里渲染它们。

下面是官方提供的例子:

HTML:

<

JavaScript:

// 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter)

通过注入路由器,我们可以在任何组件内通过this.$router访问路由器,也可以通过this.$route访问当前路由:

// Home.vue

该文档通篇都常使用router实例,不过需要留意一下this.$router和router使用起来完全一样,一般使用this.$router的原因是我们并不想在每个独立需要封装路由的组件中都导入路由。

这里有个比较完整的例子(使用CDN并未使用模块化方式):

<!DOCTYPE html>

要注意,当<router-link>对应的路由匹配成功,将自动设置class属性值.router-link-active,可以查看 API 文档 学习更多相关内容。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。