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-router: 嵌套路由

模板抽离我们已经学习过了Vue模板的另外定义形式,使用。 首页 新闻 然后js里定义路...

Vue-router template书写规范/写法/反斜杠

template书写规范/写法/反斜杠 template Vue-router template怎么写 怎么加\ template报错...

vue2.0环境搭建(含router路由)

vue2.0环境搭建(含router路由)

vue-router 在模块化 vue中的使用

注意:vue-router 2只适用于Vue2.x版本,下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。 推荐使用npm安装。 npm install vue-rout...

Vue2+VueRouter2+webpack 构建项目实战(六)加入tab栏切换,拓展项目

本文参考 fungLeo大神的博客,本人现在学习vue,仅仅当做笔记。大神链接:http://blog.csdn.net/fungleo/article/details/53171052 好了,开始开...

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

导航按钮: 新车 二手车
  • luckylqh
  • luckylqh
  • 2016年11月04日 18:15
  • 18692

Vue 编写容易出现的问题

Vue 实现 Tab切换实现的场景很多,比如,利用vue-router、利用第三方插件、利用组件等等.我用的是组件,为什么不用路由,有3个原因: 1、因为我认为使用路由,再切换tab的时候,路劲地址是...

基于Vue的简单的单页面应用

基于Vue的简单的单页面应用 在对Vue和webpack有了一定了解后,我们就可以开始利用所了解的东西做一个简单的webapp了,不了解的同学可以看下我的前两篇关于vue和webpack的基本应...

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

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

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

说明:我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3 如果大家在实践的过程中与本文所说的内容有较大...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Vue.js系列之vue-router(上)(3)
举报原因:
原因补充:

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