关于vue.js:vue面试一

1. 路由传参,name 和 path 的区别

// 字符串模式
 // 编程式导航（路由）this.$router.push(`/home/12?newscontent=marco`)// 就是实现路由链接的成果
      

   // 命名路由  对象模式
   // 用 name 跳转的形式能够实现带参数，而且不在页面显示,** 留神用 path 跳转的话，params 是不失效的 **
      const location = {
        name: "home",
        params: {nid: 12},
        query: {newscontent: 'marco'},
      };  
    this.$router.push(location)   
//path 传参
this.$router.push({path:'/home',query: {id:'1'}})


this.$router.push({name:'home',params: {id:'1'}})  // 只能用 name
//router 路由配置 path: "/home/:id"  ,
// 不配置 path , 第一次可申请, 刷新页面 id 会隐没
// 配置 path, 刷新页面 id 会保留
{
    path:'/home/:id',
    component:Home,    
    name:'home'
}

name 和 path 跳转的区别在于

1.name 命名 传参用 params 和 query, path 属性传参，不能用 params，会有效
2.router 路由 x 须要配置 path:“/home/:id”, 不然页面的 id 不会保留

2. 路由守卫

2.1. 全局前置路由守卫 router.beforeEach

import routes from '@/router/routes'
const router = new VueRouter({
  routes,
  scrollBehavior (to, from, savedPosition) {return { x: 0, y: 0}
  }
})

// 增加全局前置路由导航守卫
// 必须登录后能力拜访的多个界面应用全局守卫（交易相干、领取相干、用户核心相干）// 主动跳转后面想而没到的页面

router.beforeEach((to, from, next) => {
  //to: 代表路由对象，指标（想去哪）//from: 代表路由对象，起始（从哪来）//netx：是一个函数，抉择放行或者不放行的意思还能够去重定向到一个新的中央  
  //next() 就是放行
  //next(false) 不放行
  //next(门路) 重定向

  let targerPath = to.path
  if(targerPath.startsWith('/pay') || targerPath.startsWith('/trade') || targerPath.startsWith('/center')){
    // 看看用户是否登录了
    if(store.state.user.userInfo.name){next()
    }else{
      // 在登录的门路前面增加上之前想要去的门路
      // 配合登录逻辑能够让咱们去到之前想去而没有去的中央
      next('/login?redirect='+targerPath)
    }
  }else{next()
  }

})

export default router

全局解析守卫

在 2.5.0+ 你能够用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 相似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

全局后置钩子

你也能够注册全局后置钩子，然而和守卫不同的是，这些钩子不会承受 next 函数也不会扭转导航自身：

router.afterEach((to, from) => {// ...})

路由独享的守卫

你能够在路由配置上间接定义 beforeEnter 守卫：

  {
    path:'/addcartsuccess',
    component:AddCartSuccess,
    beforeEnter: (to, from, next) => {
      let skuNum = to.query.skuNum
      let skuInfo = sessionStorage.getItem('SKUINFO_KEY')
      if(skuNum && skuInfo){next()
      }else{next('/')
      }
    }
  },

组件内的守卫

 beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创立
    // 如果外部须要用到 this，那么就得用上面的那个写法
    if (!store.state.user.userInfo.name) {
      // 没有登录，放行
      next();} else {
      // 登录了，跳转到 home 页面
      next("/home");
    }
  },
  
   // beforeRouteEnter(to, from, next) {//   next((vm) => {
  //     // 通过 `vm` 拜访组件实例 vm 就是你之前想要的 this
  //   });
  // },

本地开发 没有任何问题 部署服务器 404 等问题