Vue.js系列的vue-路由器(一)(3)

描述：

我们的项目现在使用：vue 2.0 vue-CLI web pack vue-router 2.0 vue-resource 1 . 0 . 3

如果实践与本文内容有较大差异，我们来看看是不是版本问题。

本文为系列文章，待我对Vue有了更深入的了解后会及时修改或更正。欢迎大家批评指出错误。以下是已完成文章的列表。

1.项目建设情况1。Vue.js系列(1)

2.2的项目结构描述。Vue.js系列(2)

摘要

Vue非常适合练习单页应用，也就是大家经常谈到的SPA(单页应用)。任何了解Vue的人都应该知道这一点。一般的单页应用都是基于路由或者页面之间的链接形成的，而Vue是基于路由和组件的，今天就来看看vue-router。Vue-router是Vue.js的官方路由插件，与vue.js深度集成，用来设置访问路径，用组件映射路径。我们给每个组件一个路由地址，跳路由相当于交换组件。vue路由器里面有相当多的内容。这里我只分享我自己项目中用到的地方，其他地方的文档你也可以看。

Vue-router官网：http://router.vuejs.org/zh-cn/(中)

你知道英文官网。只需删除“zh-cn/”。

开始使用vue路由器

在这里，我假设大家以前都通过模块工程的方式练习过vue Demo，在此基础上，我们增加了vue-router。

1.装置

Npm安装vue路由器2。在项目main.js中安装路由插件

从“vue”导入vue从“vue-router”导入vue路由器vue.use (vue路由器)3。在组件中使用路由

先来看看路线跳转的效果。注意地址栏的变化。

下面的tabBar是一个组件(偷偷告诉你，在微信小程序里，这个功能直接配置app.json文件)

当单击每个选项卡时，路由地址将相应地改变，这实际上是呈现相应的组件。让我们详细看看代码。

Footer.vue组件

模板div class=' footer ' div class=' readType ' v-if=' readType . count ' { { readType . count } }/div ul class=' main-nav ' Li路由器-链接到='/Home ' I class=' icon-navicon-nav 1 '/Ispan主页/span/路由器-链接/Li Li路由器-链接到='/quan' v-bind: class=' {r路由器3360 activ } I class=' icon-navicon-nav 2 '/Ispan校友圈/span

1.使用路由器链接组件进行导航。

2.通过传入“to”属性来指定链接。

3 .默认情况下，路由器链接将呈现为“a”标记

路由出口

前面我们说过，路由跳转意味着对应的组件正在渲染，那么如何在页面上显示渲染的内容就是路由出口‘路由器-视图/路由器-视图’所做的事情，路由匹配的组件会在这里渲染。

可以在当前组件或其他组件中设置路由出口。在项目中，我们在最大的容器App.vue组件中渲染所有组件(我们项目中的App组件仅用作渲染容器)。

模板div id='app '路由器-视图/路由器-视图/div/模板JavaScript

定义路由的文件可以直接写入main.js文件，也可以创建一个新的js文件。因为我们有很多组件，所以我们取出路由，单独编写一个router.js文件。

//0.如果使用模块化编程机制进入Vue和VueRouter，应该从‘Vue’中调用vue.use (vue router) import vue从‘Vue-router’中导入Vue router Vue . use(Vue router)//1。定义(路由)组件。//可以从其他文件导入。我们通常在编写路由之前构建组件。//所以会有很多这样的说法。“导入主页表单”。/components/home“导入登录表单”。/components/log in//2。定义路线routes: [//这个和1.x有很大区别，所以有联系的话可以看清楚{Path3360'/'。//浏览器网络请求通过后，默认会转到域名下的根目录，名称为：‘home’。//所以我们把这个组件作为默认主页，component: home}，{path3360'/login '，name:' login '。Component:登录}] //3。创建路由器实例，然后传递“路由”配置。//您也可以传递其他配置参数，但就这么简单。Const router=new VueRouter({ //你只是觉得Const是var routes //(缩写)相当于routes: routes }) //4。创建并装载根实例。//记得通过路由器配置参数注入路由，//这样整个应用就有了路由功能const app=newvue ({router})。$ mount(' # app ')//现在，应用程序已经启动！摘要

我先在这里分享一下，主要学到了以下几点：

1.1.vue路由器的安装和使用

2.在组件模板中写入格式

3.知道路线出口

4.如何定义路线

5.创建路由实例和装载实例

在下一篇文章中，我将继续分享路由的其他用途(在项目中使用):

1.如何激活当前页面，标签页也被激活，也就是活动类

2.路由跳转时添加过渡动态效果

3.路由参数和命名路由

4.实现资源的惰性加载

5.程序导航

6.6 .路由器链路的其他表现形式

7.路由器构造详细的配置

内容有点多，可能要分细节了。但我还是想通过自己的理解，分享一下我遇到的问题和用过的知识点。

以上是边肖(I) (3)介绍的Vue.js系列的vue-router，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！