简单认识一下什么是vue-router

什么是vue-router？

用通俗一点的话来讲，其实就是一个url和组件之间的映射关系，当我们访问不同的url的时候在页面渲染不同的组件

vue-router怎么用？

vue-router作为一个vue的插件来使用：

• 首先，必定是要安装vue-router => npm install vue-router --save
• 在入口文件中引入vue-router => import Router from 'vue-router'
• 作为插件注册到vue中 => vue.use(Router)
• 然后就可以new Router() 得到一个实例对象，并把该对象添加到Vue实例的router属性，为避免在入口文件中造成大量代码冗余，通常做法是新建一个目录用来存放路由的配置对象
• 在new Router() 的时候，需要传入一个配置对象，该对象中包含一个routers属性，在这个属性中我们设置url和组件之间的关系。

new Router({
	routers:[
		{
			path:'url',
			component: componentName
		}
	]
	})

• 相应的，在页面中，或者说在其他组件中，用router-view 来渲染和url绑定的组件

vue-router的两种模式

• hash 模式
• History 模式

在vue-router中默认使用的是hash模式，在hash模式下，使用hash来模拟一个完成的url，hash即url中'#'和'?'之间的内容，当hash改变时，页面不会重新刷新，从而到达不刷新页面改变视图的目的。

当然由于种种原因，我们还可以使用history模式，用那种模式还是看个人习惯吧，history模式美观，确实是比hash要好一些。

动态路由

在有些情况下我们需要把多个url匹配到同意个组件，如果我们为每一个url都配置一个路由，那么僵造成大量的重复代码，这时候我们就需要用到动态路由。

动态路由指的是将多个url绑定到同一个组件，在配置路由的时候

• 格式：path:'pathName/:name' ---此处的name是不固定的变量
• path:'pathName/list1'
• path:'pathName/list2'
• path:'pathName/list3'
• path:'pathName/list4'
• 以上url都会匹配到 path:'pathName/:name' 绑定的组件，并会把list1,list2,list3,list4赋值到name变量

在组件中有一个对象，$route,在组件中我们可以通过this.$route.params来访问当前匹配的变量name。

嵌套路由

未完待续………………