什么是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。
嵌套路由
未完待续………………