欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-02 13:33:42
...

什么是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。

嵌套路由

未完待续………………