vue基础（10）--vue-router-白红宇

路由：

在<router-view> 中显示跳转位置，注意点：

exact

router-link


      
       app
      
      
       login
             
      
       login
         
      
       login exact
      
      复制代码

重点：props的使用。

//******注意：尽量用props属性，让组件跟路由解耦,复用性更高

//还有子路由 path:‘：id’的用法

props：（route）=>({id:route.query.b})  props:  {id:"456"}在组件内props:['id'], console.log(this.id)复制代码

异步路由：

component: () => import('../views/todo/todo.vue')             //按需加载，优化利器复制代码

处理一个路由跳转两块布局的情况:

/*components:{                                 //处理一个路由跳转两块布局的情况        default:Todo,                          //
      
               a:Login                                //
       
        }*/复制代码

children: [  { path: 'test',              component: Login } ]复制代码

routes.js

-----------------------------------------------------------------------export default [  {    path: '/',    redirect: '/app'                           //默认路由跳转  },  {    // path: '/app/:id',                       //路由传参** :id    (重*要)    path: '/app',                              // 类比：query  ?a=123&b=456   通过this.$router获取    props: true,                               //设置为true，  在组件内直接可以通过props取出————props：['id']    还可以指定传入id, eg:props:{id: '456'}, props: (route) => ({ id: route.query.b })b就是456    component: () => import('../views/todo/todo.vue'),   // --- 异步路由    name: 'app',                               //路由命名 
          meta: {      title: 'this is app',      description: 'asdasd'    },    beforeEnter (to, from, next) {      console.log('app route before enter')      next()    }    // children: [              //子路由    //   {    //     path: 'test',    //     component: Login    //   }    // ]  },  {    path: '/login',    component: () => import('../views/login/login.vue')    // component: Login  }]复制代码

router.js //router 参数 routes

知识点：

mode:history . 默认是hash路由，url后有#,修改为history

query查看每个url上带的参数。this.$router

import Router from 'vue-router'import routes from './routes'export default () => {  return new Router({    routes,    mode: 'history',                              //默认hash，  修改为histroy后，url无#    // base: '/base/',                            //默认跳转的路由加入base,基路径,非强制性    linkActiveClass: 'active-link',               //
       
         app
           linkExactActiveClass: 'exact-active-link',    scrollBehavior (to, from, savedPosition) {    //页面路径跳转的时候，页面要不要滚动        if (savedPosition) {             return savedPosition                 //（要不得要定位到上处）        } else {            return { x: 0, y: 0 }        }    }    // fallback: true                            //不是所有浏览器支持history模式，一般就用true开启多页应用    // parseQuery (query) {                      //url 后面的参数 ?后面的货   // },   // stringifyQuery (obj) {                    //字符串转对象   // } })}复制代码

路由守卫---利器

作用：跳转前后座检查，如：身份检查，地址检查，登录状态检查

const router= createRouter()router.beforeEach((to,from,next)=>{    console.log('before each invoked')    if(to.fullPath ==='/login'){ //跳转之前可做判断，做一些预处理，如：验证用户登录        next({path:'/login'})       }else{        next()    }})router.beforeResolve((to,from)=>{    console.log('before resolve invoked')})router.afterEach((to,from)=>{    console.log('after each invoked')})复制代码

组件内部

beforeRouteEnter(to,from,next){    next(vm=>{        console.log('after enter vm.id is',vm.id)    })},beforeRouteUpdate(to,from,next){   //路由更新的时候出发，wactch方法增加开销较大    next()},beforeRouteLeave(to,from,next){    //可做确认离开判断    if(global.confirm('are you sure?')){        next()    }},复制代码

顺序：全局路由->路由配置->组件内部->beforeResolve->afterEach

webpack相关配置

historyApiFallback:{              //前端刷新界面默认回到这个界面    index:'/public/index.html'    //这货地址跟config.output.public的值相关}eg:webpck.base.config.js处config={    ...    output:{        ...        publicPath:'/public/'          //historyApiFallback的基路径    }}复制代码

将路由的dom缓存到内存中 --- ---性能优化


      
     
    复制代码