文档章节

vue-router(2.0)入门教程

gujieyi
 gujieyi
发布于 2016/10/15 17:30
字数 1858
阅读 5524
收藏 42

概述:

      vue-router是Vue.js官方的路由插件,比较适合用于构建单页面应用....(此处就省略了,直接主题)。本教程主要针对对api还比较不熟的同学,所以demo都是简单(js + html混写的)。目标:通过本教程,可以使用vue-router进行最基本的日常开发。

全部案例都放在:https://github.com/gu091120/vueRouterDemo.git
有兴趣的朋友可以下载下来看一下,如果觉得对你还是有帮助的,请 start 一下谢谢!!

安装:

   1.直接下载:https://unpkg.com/vue-router;(本教程使用的)注意:本次教程用的vue和vue-router都是2.0版本

    2.npm(安装):npm install vue-router;

    3.gitHub(下载): git clone https://github.com/vuejs/vue-router.git node_modules/vue-router

 

首页先简单介绍使用四个基本步骤:

        1.定义组件

        2.定义路由

        3.创建router实例并将定义好的路由传入

        4.创建和挂载根实例(vue和vue-router)

第一个应用

        首页包的引入

<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

       HTML:

<div id="app">
  <h1>Hello World!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/">Go to home</router-link>
    <router-link to="/news">Go to news</router-link>
    <router-link to="/about">Go to about</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>


开始正题:

        1.定义vue组建


// ‘const’ 是ES6的新的声明,如果不熟悉可以使用‘var’ 
const home = { template: '<div>this is home page</div>' } 
const news = { template: '<div>this is news page</div>' } 
const about = { template: '<div>this is about page</div>' }

        2.定义路由

const routes = [
  { path: '/', component: home},
  { path: '/news', component: news},
  { path: '/about', component: about},
]

        3.创建router实例,并将定义的路由传入

const router = new VueRouter({
  routes // (缩写)相当于 routes: routes
})

        4.创建和挂载根实例

const app = new Vue({
  router
}).$mount('#app')

        好了,我们的第一个应用出来了。

接下来,我将开发中可能遇到问题,进行解决:

        问题1:作为导航,当我们选择某个时,需要添加选中的状态。

        当 <router-link> 对应的路由匹配成功,将自动设置 class 属性值 .router-link-active。所以我们只需要在class中添加.router-link-active 的css样式即可,比如:   

.router-link-active{
			color: red;
			font-weight: 600;
		}

动手去试的同学可能会发现这么一个现象:

明明我只选择了Go to news 但是Go to home 缺也是被选择的。这里的原因就是:<router-link>在和路由匹配的时候,并不是完整匹配,而是只要匹配到了就会添加 .router-link-active 这个class。而在我们定义路由的时候,定义了 “/” ,自然后面在选择 “/home ”和 “/news ” 时 home("/")自然就是一直被选中的状态,要解决这个问题其实很简单,只要在<router-link>中添加 “ exact ”  ,即可坐到完全匹配。

<div id="app">
	  <h1>Hello World!</h1>
	  <p>
	    <!-- 使用 router-link 组件来导航. -->
	    <!-- 通过传入 `to` 属性指定链接. -->
	    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
	    <router-link to="/" exact >Go to home</router-link>
	    <router-link to="/news">Go to news</router-link>
	    <router-link to="/about">Go to about</router-link>
	  </p>
	  <!-- 路由出口 -->
	  <!-- 路由匹配到的组件将渲染在这里 -->
	  <router-view></router-view>
	</div>

这样问题变回解决了。到这里细心的同学,可能会问了,我不想用 .router-link-active 这个class名称,想自己定义一个。这个只要在我们定义路由的时候添加一个 linkActiveClass 属性,后面跟着你想要的class名称即可;

const router = new VueRouter({
			  routes, // (缩写)相当于 routes: routes
			  linkActiveClass:"my-ctive",
			})

到这里demo1结束。

         问题2:在开发商城类似的webApp的时候,会遇到一个页面里需要两个或者两个以上的路由(一个主要路由各个模块间跳转,另一个则是商品分类,对应各个类型商品页面)。

这个对于demo内容有重复的我就不说了,直接看不一样的地方:

HTML:

<div id="app">
	  <h1>Hello World!</h1>
	  <p>
	    <!-- 使用 router-link 组件来导航. -->
	    <!-- 通过传入 `to` 属性指定链接. -->
	    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
	    <router-link to="/" exact >Go to home</router-link>
	    <router-link to="/news">Go to news</router-link>
	    <router-link to="/prodects">Go to prodects</router-link>
	    <router-link to="/about">Go to about</router-link>
	  </p>
	  <!-- 路由出口 -->
	  <!-- 路由匹配到的组件将渲染在这里 -->
	  <router-view></router-view>
	</div>

接下来,依旧按四步来,

        1.定义vue组件 :需要在组件中添加<router-link>;

  const prodects = { 
				 template: `
						    <div>
						      <h2>my prodects </h2>
						      	<router-link to="/prodects/book">Go to book</router-link>
						      	<router-link to="/prodects/fruit">Go to prodects</router-link>
						      <router-view></router-view>
						    </div>
						  `

				 }

  const book = {template: "<div> this is book </div>"}
  const fruit = {template: "<div> this is fruit </div>"}

        2.定义路由,这里需要注意的:children 中的 path 不需要我们填写完整的只要是“ /” 后面的即可

const routes = [
			  { path: '/', component: home},
			  { path: '/news', component: news},
			  { path: '/about', component: about},
			  { path: '/prodects', component: prodects,
			  	children: [
				  		{
				  			path:"book",
				  			component:book,
				  		},
				  		{
				  			path:"fruit",
				  			component:fruit,
				  		},
				  	],
				},
			]

        3.创建router实例,并将定义的路由传入(和demo1一样)
        4.创建和挂载根实例(和demo1一样)

最后的效果:

到此demo2结束

        问题3,在我们开发webApp,过度效果动态加载可以大大增加用户体验,vue-router也给我们提供了他的解决方案。

    html,这里的需要在 <router-view> 外面增加 <transition> 注意添加:增加name属性,来自动添加 css过度类名:例如:name:"fade",就会自动拓展为:fade-enter 和 fade-enter-active。

<div id="app">
	  <h1>Hello World!</h1>
	  <p>
	    <!-- 使用 router-link 组件来导航. -->
	    <!-- 通过传入 `to` 属性指定链接. -->
	    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
	    <router-link to="/" exact >Go to home</router-link>
	    <router-link to="/news">Go to news</router-link>
	    <router-link to="/prodects">Go to prodects</router-link>
	    <router-link to="/about">Go to about</router-link>
	  </p>
	  <!-- 路由出口 -->
	  <!-- 路由匹配到的组件将渲染在这里 -->
	  <transition name="fade"  mode="out-in"> //mode属性则控制离开/进入的过渡时间
	  	<router-view></router-view>
	  </transition>
	</div>

        CSS样式

       .my-ctive{
			color: red;
			font-weight: 600;
		}

		.fade-enter-active, .fade-leave-active {
		  transition: opacity .5s ease;
		}
		.fade-enter, .fade-leave-active {
		  opacity: 0
		}
		.child-view {
		  position: absolute;
		  transition: all .5s cubic-bezier(.55,0,.1,1);
		}
		.slide-left-enter, .slide-right-leave-active {
		  opacity: 0;
		  -webkit-transform: translate(30px, 0);
		  transform: translate(30px, 0);
		}
		.slide-left-leave-active, .slide-right-enter {
		  opacity: 0;
		  -webkit-transform: translate(-30px, 0);
		  transform: translate(-30px, 0);
		}

            1.定义vue组件,通过在wacth属性添加‘ $route’,来监视路径的变化,并且根据路径来动态的添加过度样式,注意:这里 <transition> 的 name 是":name " , 因为需要动态的添加。 

   const prodects = {
			template: `
						    <div>
						      <h2>my prodects </h2>
						     	 <router-link to="/prodects" exact>Go to Default</router-link>
						      	<router-link to="/prodects/book">Go to book</router-link>
						      	<router-link to="/prodects/fruit">Go to prodects</router-link>
						      	<transition :name="transitionName">
						      	<router-view class="child-view"></router-view>
						      	</transition>
						    </div>
						  `,
			data() {
				return {
					transitionName: "slide-left"
				}
			},
			watch:{
				 '$route'(to,from){ //ES6新写法 和 '$route':fun()一样
				 	const toDepth = to.path.split('/').length
				 	const fromDepth = from.path.split('/').length
				 	this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
				 	console.log(this.transitionName)
				 }
			}


		}

        2.定义路由;

const routes = [{
			path: '/',
			component: home
		}, {
			path: '/news',
			component: news
		}, {
			path: '/about',
			component: about
		}, {
			path: '/prodects',
			component: prodects,
			children: [{
				path: "book",
				component: book,
			}, {
				path: "fruit",
				component: fruit,
			},{
				path: "",
				component: Default,
			}, ],
		}, ]

       3.创建router实例,并将定义的路由传入(和demo1一样)

       4.创建和挂载根实例

const app = new Vue({
			router,
			data(){
				return {
					fade:"fade"
				}
			}

		}).$mount('#app')

最后效果:


demo3结束;

        通过这三个案例,我相信对于看完的同学,对vue-router,应该有了基本的认识,对于基本开发也应该没什么问题了!

        对于能看到这里的朋友,我表示非常感谢。希望各位能多多指出我的足,我知道我现在这个教程肯定有很问题,但是我还是想帮助更多还是在入门阶段朋友更好的学习,因为当初我(一个园林工程毕业学生)也是通过前辈们一篇又一篇的教程,才让我走到今天,我也会坚持争取每周都能更新!

© 著作权归作者所有

gujieyi
粉丝 2
博文 7
码字总数 4468
作品 0
杭州
程序员
私信 提问
加载中

评论(2)

notanymore
notanymore
太棒了,解决了我的几个问题~就是watch,$route这个地方文档上好像没有看到啊,哪里有这个文档吗
lufei_xiao
lufei_xiao
棒!!! 大爱!
从头开始学习vue-router

一、前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用标签编写链接哪?vue-router如何使用?常见路由操作有哪些?等等这些问题,就是本篇要探讨的主要问题...

大灰狼的小绵羊哥哥
2018/12/31
0
0
Vue学习路径-轻松从基础到实战

里边全部是vue的免费视频,全算下来有100多集。希望可以帮助前端小伙伴学习Vue。 学习一直属于孤独者,任何伟大的发明家都忍受过寂寞和无助,但他们最终走了出来。也许你刚来到本站,也许你刚...

技术胖
2018/08/27
0
0
Vue 2.0 正式版发布,性能大幅提升

Vue.js 2.0 发布了。 此次更新内容: 性能: 基于第三方 benchmark,数值越低越好 2.0 用一个 fork 自 snabbdom 的轻量 Virtual DOM 实现对渲染层进行了重写。在其上层,Vue 的模板编译器能够...

达尔文
2016/10/01
15.5K
38
Vuebnb:一个用vue.js和Laravel构建的全栈应用

今年我一直在写一本新书叫全栈Vue网站开发:Vue.js,Vuex和Laravel。它会在Packt出版社在2018年初出版。 这本书是围绕着一个案例研究项目,Vuebnb,简单克隆Airbnb。在这篇文章中,我会把它如...

笔阁
2018/04/16
233
0
VUE前端框架

Vue 入门实战项目——知乎日报 这是一个基于 Vue 全家桶开发的知乎日报 WebApp,页面样式主要参考 iOS 版知乎日报 APP Vue 超大数据列表解决方案 vue-recyclerview 开源 Vue 超大数据列表解决...

掘金官方
2018/01/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
今天
6
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
今天
7
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
今天
5
0
OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
1K
11
MongoDB系列-- SpringBoot 中对 MongoDB 的 基本操作

SpringBoot 中对 MongoDB 的 基本操作 Database 库的创建 首先 在MongoDB 操作客户端 Robo 3T 中 创建数据库: 增加用户User: 创建 Collections 集合(类似mysql 中的 表): 后面我们大部分都...

TcWong
今天
40
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部