vue-router(2.0)入门教程

最新推荐文章于 2024-08-28 14:18:59 发布

weixin_33720452

最新推荐文章于 2024-08-28 14:18:59 发布

阅读量95

点赞数

文章标签： git javascript python ViewUI

原文链接：https://my.oschina.net/gujieyi/blog/758930

版权

2019独角兽企业重金招聘Python工程师标准>>>

概述：

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,应该有了基本的认识，对于基本开发也应该没什么问题了！

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

转载于:https://my.oschina.net/gujieyi/blog/758930

weixin_33720452

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-router(2.0)入门教程

2019独角兽企业重金招聘Python工程师标准>>> ...
复制链接

扫一扫