11.Vue.js前端框架：vue-router路由

1、常用插件有哪些

在利用 Vue.js 开发一个完整的单页 Web 应用时，还需要使用 Vue.js 提供的插件。Vue.js 比较常用的插件是 vue-router 和 axios。其中 vue-router 提供的是路由管理的功能，axios 提供的是数据请求的功能。

2、应用 vue-router 实现路由

2.1 vue-router 插件引入

vue-router 插件可以提供路由管理的功能。而在使用该插件之前需要在页面引入该插件，引用 vue-router 插件的方法主要有下列三种方式：

vue-router 插件下载网址： https://router.vuejs.org/zh/installation.html

1. 直接下载并使用 script 标签引入

在 Vue.js 官网中直接下载 vue-router 插件文件并使用 script 标签引入。具体步骤如下：
（1）进入 vue-router 的下载页面，找到下载的超链接，图片如下图所示：

（2）单击鼠标右键，找到“链接另存为”选项，将 vue-router 插件存储到项目指定的文件夹中，通常和 vue.js 文件统一放置在项目的 JS 文件夹中，然后在页面中使用下面的语句，将其引入到文件中。

<script type="text/javascript" src="JS/vue-router.js"></script>

2. 使用 CDN 方法

在项目中使用 vue-router.js，可以采用引用外部 CDN 文件的方式。在项目中直接通过 script 标签加载 CDN 文件夹，代码如下所示：

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

3. 使用 NPM 方法

使用 NPM 方法进行安装的命令如下所示：

npm install vue-router

引用方式如下：

import Vue from 'Vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

2.2 vue-router 基础用法

应用 Vue.js 和 vue-router 可以创建简单的单页面应用。使用 Vue.js 可以通过多个组件来组成应用程序，而 vue-router 的作用是将每个路径映射到对应的组件，并通过路由进行组件之间的切换。

Vue.js 路由允许通过不同的 URL 访问不同的内容。通过路由实现组件之间的切换需要使用 router-link 组件，该组件用于设置一个导航链接，通过 to 属性设置目标地址，从而切换不同的 HTML 内容。

实现一个简单的路由代码如下所示：

<div id="box">
			<p>
				<!--使用<router-link>组件进行导航 -->
				<!--通过传入 to 属性指定链接 -->
				<!--<router-link>默认会被渲染成一个<a>标签 -->
				<router-link to="/first">页面一</router-link>
				<router-link to="/second">页面二</router-link>
				<router-link to="/third">页面三</router-link>
			</p>
			<!-- 路由出口，路由匹配到的组件渲染的位置-->
			<router-view></router-view>
		</div>
		   <script type="text/javascript">
			   //定义路由组件，可以从其他文件 import 引入进来
			   var first ={
				   template:'<div>页面一：脚踏实地</div>'
			   };
			   var second ={
			   	   template:'<div>页面二：保持初心</div>'
			   };
			   var third ={
			   	   template:'<div>页面三：做自己想做的事</div>'
			   };
			   //定义路由，每个路由应该映射到一个组件。其中 component 可以是通过 Vue.extend()创建的组件构造器，或者是一个组件选项对象
			   var routes =[
				   { path:'/first',component:first},
				   { path:'/second',component:second},
				   { path:'/third',component:third}
			   ];
			   //创建 router 实例,传入 routes 配置参数，还可以传入其他配置参数
			   var router =new VueRouter({
				   routes //相当于 routes:routes 的缩写
			   });
			   //创建和挂载根实例。通过 router 配置参数注入路由，让整个应用都有路由功能
			   var app = new Vue({
				   router
			   }).$mount('#box');
		   </script>

在上述代码中，router-link 会被渲染成 a 标签。例如，第一个 router-link 会被渲染成 < a href="#/first" >页面一< /a>。当点击第一个 router-link 对应的标签时，由于 to 属性的值是 /first，因此实际的路径地址就是当前 URL 路径后加上 #/first。这时，Vue 会找到定义的路由 routes 中 path 为 /first 的路由，并将对应的组件模板渲染到 router-view 中。运行结果如下图所示：

2.3 路由动态匹配

在实际开发中，经常需要将某种模式匹配到的所有路由全部映射到同一个组件。例如，对于所有不同 ID 的用户，都需要使用同一个组件 User 来渲染。因此，可以在 vue-router 的路由路径中使用动态路径参数来实现这个效果。示例代码如下所示：

 <script type="text/javascript">
			   var User ={
				   template:'<div>User</div>'
			   }
			   var router = new VueRouter({
				   routes:[
					   //动态路径参数，以冒号开头
					   { path:'/user/:id' component:User}
				   ]
			   })
		   </script>

上述代码中，:id 记为设置的动态路径参数。

2.4 嵌套路由

有些界面通常是由多层嵌套的组件组合而成，例如，二级导航菜单就需要使用嵌套路由。使用嵌套路由时，URL 中各段动态路径会按照某种结构对应嵌套的各层组件。

在前面，我们知道 router-view 是最顶层的出口，用于渲染最高级路由匹配到的组件。同样，一个被渲染的组件的模板中同样可以包含嵌套的 router-view。要在嵌套的出口中渲染组件，需要在 VueRouter 实例中使用 children 参数进行配置。

1、例如，router-view 是最顶层的出口，它会渲染一个和最高级路由匹配的组件。示例代码如下所示：

<div id="box">
			<router-view></router-view>
		</div>
		   <script type="text/javascript">
			   var User ={
				   template:'<div>用户{{$route.params.id}}</div>'
			   }
			   var router = new VueRouter({
				   routes:[
					   //动态路径参数，以冒号开头
					   { path:'/user/:id' component:User}
				   ]
			   })
		   </script>

2、同样，在组件的内部也可以包含嵌套的 router-view。例如，在User 组件的模板中添加一个 router-view，示例代码如下所示：

var User ={
    template:'<div>,
		<span>用户{{$route.params.id}}</span>
		<router-view></router-view>
	</div>'
	}

3、如果在嵌套的出口中渲染组件，需要在 VueRouter 中使用 children 参数进行配置。示例代码如下：

var router = new VueRouter({
				   routes:[
				   {
					   path :'/user/:id',
					   component:User,
					   children:[{
						   // /user/:id/sex匹配成功后，UserSex会被渲染在User的 <router-view>中
						   path:'sex',
						   component:UserSex
					   },{
						  // /user/:id/age匹配成功后，UserSex会被渲染在User的 <router-view>中 
						  path:'age',
						  component:UserAge
					   }]
				   }
				   ]
			   })

4、需要注意的是，如果访问一个不存在的路由，则渲染组件的出口不会显示任何内容。这时可以提供一个空的路由。示例代码如下所示：

var router = new VueRouter({
				   routes:[
				   {
					   path :'/user/:id',
					   component:User,
					   children:[{
						   // /user/:id/sex匹配成功后，UserSex会被渲染在User的 <router-view>中
						   path:'',
						   component:UserSex
					   },{
						  // /user/:id/age匹配成功后，UserSex会被渲染在User的 <router-view>中 
						  path:'age',
						  component:UserAge
					   }]
				   }
				   ]
			   })

2.5 命名路由

在进行路由跳转时，可以为较长的路由设置一个别名。在创建 VueRouter 实例时，在 routes 配置中可以为某个路由设置名称。示例代码如下：

 var router = new VueRouter({
				   routes:[
				   {
					  path : '/user/:id',
					  name:'user',
					  component:User
					   }
					]
			   })

在设置路由名称后，要想链接到该路径，可以为 router-link 的 to 属性传入一个对象。代码如下：

<router-link :to="{name:'user',params:{id:1}}">用户</router-link>

单击“用户”链接时，会将路由导航到 /user/1 路径

2.6 应用 push() 方法定义导航

使用 < router-link > 创建 < a > 标签可以定义导航链接。除此之外，还可以使用 router 的实例方法 push() 实现导航的功能。在 Vue 实例内部可以通过 $router 访问路由实例，通过调用 this. $router.push 即可实现页面的跳转。

该方法的参数可以是一个字符串路径，或者是一个描述地址的对象。示例代码如下所示：

// 跳转到字符串表示的路径
this.$router.push('home')
//跳转到指定路径
this.$router.push({path:'home'})
//跳转到指定命名的路由
this.$router.push({name:'user'})
//跳转到指定路径并带有查询参数
this.$router.push({path:'home',query:{id:'2'}})
//跳转到指定命名的路由并带有查询参数
this.$router.push({name:'user',params:{userID:'1'}})

2.7 命名视图

在页面布局时，有些页面分为顶部、左侧导航栏和主内容3个部分，这种情况下需要将每个部分定义为一个视图。为了在页面中同时展示多个视图，需要为每个视图进行命名，通过名字进行对应组件的渲染。在界面中可以有多个单独命名的视图，而不是只有一个单独的出口。如果没有为 router-view 设置名称，那么它的名称默认为 default。
1、为界面设置 3 个视图的代码如下：

<router-view class="top"></router-view>
<router-view class="left" name="left"></router-view>
<router-view class="main" name="main"></router-view>

2、由于一个视图使用一个组件渲染，对于同一个路由，多个视图就需要多个组件进行渲染。为上述三个视图应用组件进行渲染的代码如下：

var router =new VueRouter({
	routes :[
		{
			path:'',
			components:{
				default:Top,
				left:Left,
				main:Main
			}
		}
	]
})

3、对于一个应用多视图的简单示例代码如下所示：

<div id="app">
			<ul>
				<li>
					<router-link to="/one">界面一</router-link>
				</li>
				<li>
					<router-link to="/two">界面二</router-link>
				</li>
			</ul>
			<router-view class="left" name="left"></router-view>
			<router-view class="main" name="main"></router-view>
		</div>
		<script type="text/javascript">
			  var LeftOne ={ //定义LeftOne组件
				  template:'<div>左侧导航栏一</div>'
			  };
			  var MainOne ={//定义MainOne组件
				  template:'<div>主内容一</div>'
			  };
			  var LeftTwo ={ //定义LeftTwo组件
			  	  template:'<div>左侧导航栏二</div>'
			  };
			  var MainTwo ={//定义MainTwo组件
			  	  template:'<div>主内容二</div>'
			  };
			  var router =new VueRouter({
				  routes:[{
					  path:'/one', //one匹配成功后渲染的组件
					  components:{
						  left:LeftOne,
						  main:MainOne
					  }
				  },{
					  path:'/two',//two匹配成功后渲染的组件
					  components:{
					  	  left:LeftTwo,
					  	  main:MainTwo
					  }
				  }]
			  });
			  var app =new Vue({
				  el:'#app',
				  router
			  });
		   </script>

2.8 重定向

如果要访问的路径设置了重定向规则，则访问该路径时会被被重定向到指定的路径。重定向也是通过 routes 配置来完成。例如，设置路径从 /a 重定向到 /b 的代码如下：

var router =new VueRouter({
	routes :[
		{path:'/a',redirect :'/b'}
	]
})

上述代码中，当用户访问路径 /a 时，URL 中的 /a 将会被替换为 /b，并匹配路由 /b，该路由映射的组件将会被渲染。

重定向的目标也可以是一个命名的路由。例如，将路径 /a 重定向到名称为 user 的路由，示例代码如下所示：

var router =new VueRouter({
	routes :[
		{path:'/a',redirect :{name:'user'}}
	]
})