Vue.js系列之vue-router(上)(3)

原创 2017年01月03日 07:55:25

说明:

我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3 

如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题。

本文是一系列文章,在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正。欢迎大家批评指出错误。以下是已完成的文章列表。

 1.Vue.js系列之项目搭建(1)

 2.Vue.js系列之项目结构说明(2)


概述

Vue非常适用于实践单页面应用程序也就是平时大家说的比较多的SPA(single page application),这点应该了解过Vue的应该都知道吧。一般的单页面应用是基于路由或页面之间的链接来形成的,Vue是基于路由和组件的,所以我们今天就来了解下vue-router。vue-router是Vue.js官方的路由插件,它和vue.js深度集成,用于设定访问路径,并将路径和组件映射起来,我们给每个组件一个路由地址,跳转路由相当于组件切换。vue-router的内容还是比较多的,这里我只分享我自己项目中用到的地方,其他地方大家可以看文档啦。

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

英文官网你知道啦,直接去掉后面的"zh-cn/"就好了。


开始使用vue-router

这里我假设大家之前都用模块工程方式实践了一个vue Demo,在此基础上我们添加vue-router。
1.安装
npm install vue-router
2.在项目main.js中安装路由插件
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
3.在组件中使用路由
先看下路由跳转的效果吧,大家注意看地址栏变化哈。
路由效果图

下面这个tabBar就是一个组件(偷偷告诉你,在微信小程序中,这个功能直接配置app.json文件就好了

每个tab点击时路由地址会相应变化,其实是渲染相应的组件,具体我们来看代码。

footer.vue组件

<template>
	<div class="footer">
		<div class="readType" v-if="readType.count">{{readType.count}}</div>
		<ul class="main-nav">
			<li>
				<router-link to="/home">
					<i class="icon-nav icon-nav1"></i><span>首页</span>
				</router-link>
			</li>
			<li>
				<router-link to="/quan" v-bind:class="{rrouter:activ}">
					<i class="icon-nav icon-nav2"></i><span>学友圈</span>
				</router-link>
			</li>
			<li>
				<router-link to="/friend">
					<i class="icon-nav icon-nav3"></i><span>学友</span>
				</router-link>
			</li>
			<li>
				<router-link to="/find">
					<i class="icon-nav icon-nav4"></i><span>发现</span>
				</router-link>
			</li>
			<li>
				<router-link to="/mine">
					<i class="icon-nav icon-nav5"></i><span>我的</span>
				</router-link>
			</li>
		</ul>
	</div>
</template>


这里有几点需要知道:

1.使用 router-link 组件来导航.

2.通过传入 `to` 属性指定链接.

3.<router-link> 默认会被渲染成一个 `<a>` 标签


路由出口

我们前面说了,路由跳转就是相应组件在渲染,那么渲染的内容是怎么显示也页面中的呢,那就是路由出口'<router-view></router-view>'做的事了,路由匹配到的组件将渲染在这里。

路由出口我们可以设置在当前组件中也可以设置在其他组件中,项目中我们就将所有组件都渲染在最大的容器App.vue组件中(我们项目中App组件只作为渲染容器)。

<template>
  <div id="app">
	<router-view></router-view>
  </div>
</template>

JavaScript

定义路由文件可以直接写在main.js文件中,也可以新建一个js文件,因为我们的组件比较多,所以单独把路由拿出来写了一个router.js文件。

// 0. 如果使用模块化机制编程,进入Vue和VueRouter,要调用 Vue.use(VueRouter)
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 1. 定义(路由)组件。
// 可以从其他文件 import 进来,我们一般都是建好了组件再来写路由的
// 所以就会有好多这样的语句。
import home from "./components/home"
import login from "./components/login"

// 2. 定义路由
  routes: [	//这里跟1.x有挺大区别,有接触的自己看清楚哦
    {
      path: '/',	//浏览器网路请求走通之后默认就会去找域名下的根目录,
      name: 'home',	//所以我们就把这个组件作为默认首页
      component: home
    },
    {
      path: '/login',
      name: 'login',
      component: login
    }
   ]

// 3. 创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({		//你就当const是var
  routes
//(缩写)相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')
// 现在,应用已经启动了!

总结

上篇先分享到这里,主要了解了有以下几点:
1.vue-router的安装和使用
2.在组件模板中的书写格式
3.知道了路由出口
4.如何定义一个路由
5.创建路由实例和挂载实例

下篇我将给大家继续分享路由的其他用法(项目中用到的):
1.如何实现当前页激活,tab标签同时也激活,即active-class
2.路由跳转时添加过渡动效
3.路由传参及命名路由
4.实现资源懒加载
5.编程式导航
6.router-link的其他表现形式
7.Router构造详细配置

内容有点多,可能还要再分细一点,写详细点。但还是想把自己遇到过的问题,用到的知识点通过自己的理解分享出来。


明天还是要用markDown来写,默认的这个编辑器排版实在太累了,经常出问题,但是我的markDown不知道为什么,光标经常会自动换行,不知道有没有朋友遇到过,能否解答一下。


版权声明:本文为博主原创文章,欢迎转载和发表评论,转载请注明出处。

相关文章推荐

Vue.js系列之vue-router(中)(4)

说明:我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3 如果大家在实践的过程中与本文所说的内容有较大...

五月工作总结

时光匆匆如白驹过隙,转眼间已经过去了五个月。工作在一家小的公司做技术员,整天为生活奔波,为别人解决问题的同时也为自己前行的方向而迷惑。究竟什么样的工作才是自己喜欢做的工作呢?有一次在一厂区做监控系统,...

VueJs路由跳转——vue-router的使用

对于单页应用,官方提供了vue-router进行路由跳转的处理,本篇主要也是基于其官方文档写作而成。 安装 基于传统,我更喜欢采用npm包的形式进行安装。 npm install vue-rou...

vue中用动态组件实现选项卡切换效果

导航按钮: 新车 二手车</r

vue.js 2.0和vue-router入门实例

自学vue.js的旅程中,没有实际项目可以操作,模仿APP一些简单的操作,所以自己边学边做了一个移动端的小实例 用到的技术:1.vue.js 2.vue-router 3.axios 4.vu...
  • YIDBoy
  • YIDBoy
  • 2017-03-22 22:30
  • 2464

Vue.js系列之vue-router(下)(5)

说明:我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3 如果大家在实践的过程中与本文所说的内容有较大...

Vue2+VueRouter2+webpack 构建项目实战(一)准备工作

Vue2+VueRouter2+webpack 构建项目实战(一)准备工作之前写的博客没有采用打包工具,而是直接引用js的方式来做的。这种方式很扯淡,也因此,我写了三篇博客之后就没有再写了。通过几个月...

2017年,我要怎么学前端

今天本来是要写一篇技术文章的,可是啊可是,第一天发生的事情太美好,美好的没心情写技术文章了。我来跟大家复盘一下今天发生的事情。 美好的第一天开始 上午也没什么事,就起来洗澡洗漱,扫地拖地打...

shell脚本

我们可以使用任意一种文字编辑器,比如gedit、kedit、emacs、vi等来编写shell脚本,它必须以如下行开始(必须放在文件的第一行): #!/bin/sh ... 注意:最好使用“!/...

Vue.js——60分钟快速入门

Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)