好程序员官网-从平凡到卓越,为梦想而拼搏-好程序员特训营

标题: 好程序员Web前端培训干货详解Vue-Router路由与配置 [打印本页]

作者: 叶子老师    时间: 2019-7-11 15:12
标题: 好程序员Web前端培训干货详解Vue-Router路由与配置
好程序员web前端培训干货详解Vue-Router路由与配置,现在的很多应用都流行SPA应用(singe page application) 。传统的项目大多使用多页面结构,需要切换内容的时候我们往往会进行单个html文件的跳转,这个时候因受到网络、性能的影响,浏览器会出现不定时间的空白界面,用户体验不好。而单页应用则是用户通过某些操作更改地址栏url之后,动态的进行不同模板内容的无刷新切换,用户体验好。而在vue2.0版本后,vue官方推出vue-router插件来实现单页面的路由跳转,内部原理就是通过组件之间的切换(组件的卸载与安装)去实现整个页面无刷新的效果。
一.项目引入路由并配置:
1.在vue项目中,通过cnpm或者yarn的方式进行vue-router的安装
cnpm i vue-router -S
yarn add vue-router -S
       2.接下来需要在入口文件main.js里面进行路由的引入与注册
        import Vue from 'vue'
        import Router from 'vue-router'
        Vue.use(Router)
3. 创建router路由器
    new Router({
      routes:[
        {path:"",component:}
      ]
    })
4. 创建路由表并配置在路由器中
    var routes = [
//path为路径,component为路径对应的路由组件
        {path,component}
    ]
    new Router({
        routes
    })
5. 在根实例里注入router,目的是为了让所有的组件里都能通过this.$router、this.$route来使用路由的相关功能api
new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: { App }
    })
6. 利用router-view来指定路由切换的位置
7. 使用router-link来创建切换的工具,会渲染成a标签,添加to属性来设置要更改的path信息,且会根据当前路由的变化为a标签添加对应的router-link-active/router-link-exact-active(完全匹配成功)类名
<router-link to="main">main</router-link>
<router-link to="news">news</router-link>
.router-link-active{
    color:red;
}
项目中多级路由配置:
在创建路由表的时候,可以为每一个路由对象创建children属性,值为数组,在这个里面又可以配置一些路由对象来使用多级路由,注意:只在一级路由的path前加 '/ '
const routes = [
  {path:'/home,component:Home},
  {path:'/list',component:List,children:[
    {path:'inner',component:Inner},
    {path:'outer',component:Outer}
  ]},
]
二级路由组件的切换位置依然由router-view来指定(指定在父级路由组件的模板中)
<router-link to='/home/inner'>inner</router-link>
<router-link to='/home/outer'>outer</router-link>
<router-view></router-view>
      但是这样发现当路由路径多级的时候,不利于快速定位路由匹配的组件。所以,可以通过命名路由的方式去实现以上代码。
我们可以给路由对象配置name属性,当我们在跳转的时候直接写name:inner就会快速的找到此name属性所对应的路由,不需要写大量的urlpath路径了。如下所示:
{path:'inner',component:Inner,name:'inner'}
这样的话,我们就可以方便的根据路由的不同进行组件之间的映射。但是,做大型项目开发的时候,我们也会发现很多的路由写在routes这个里面,会让router这个文件变得很大不利于维护管理。除此之外,如果通过这样的方式还会导致当用户打开首页的话,因为webpack打包的时候,加载内容异常的多导致打开速度很慢。所以我们需要对我们的路由采取懒加载的方式进行引入:
const routes = [
homeRouter
]
//homeRouter.js文件里面
export defult {
  Name:’homeRouter’,
  Path:’/home’
  component:() => import('./my-async-component')}
}
Vue-Router的路由守卫:
在项目开发中,我们经常会在路由跳转前后做一些操作。例如我们可以通过利用vue-router里面提供的路由守卫结合axios拦截器实现项目的登录拦截等操作。Vue-router里面提供的路由守卫可以分为三大类,分别是全局路由守卫、单个的路由钩子的路由守卫、路由组件内部的路由守卫。好,我们依次来看:
通过 router.beforeEach 或者router.afterEach注册一个全局守卫:
1-1
router.beforeEach((to, from, next) => {
    //会在任意路由跳转前执行,next一定要记着执行,不然路由不能跳转了
  next()
})
守卫方法需要接受三个参数:to、from、next
to:即将要进入的目标对象
From:当前导航正要离开的路由
Next: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
1-2
//会在任意路由跳转后执行  
Router.afterEach((to,from)=>{
})
单个路由钩子守卫:
只有beforeEnter,在进入前执行,to参数就是当前路由
routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // next也是必须要写的
      }
    }
  ]
路由组件钩子守卫:
beforeRouteEnter (to, from, next) {
    //内部不能调用this  当这个路由调用时,组件没有被初始化
  },
  beforeRouteUpdate (to, from, next) {
    // 内部可以访问组件实例 `this`
//路由内部动态参数改变了,组件被复用的时候调用(/list/1跳入/list/2,详情组件复用的时候)
  },
  beforeRouteLeave (to, from, next) {
    // 可以访问组件实例 `this`  路由离开这个组件的时候进入
  }
以上就是Vue-Router里面的核心技术点,需要在项目中不断的练习、具体到业务逻辑中使用才能更好的理解、渗透,其次多加记忆、巩固才可更加清晰。

好程序员web前端培训官网:http://www.goodprogrammer.org/html5_class.shtml






欢迎光临 好程序员官网-从平凡到卓越,为梦想而拼搏-好程序员特训营 (http://www.goodprogrammer.org/) Powered by Discuz! X3.4