1.路由参数，名称和路径的区别//字符串格式//程序化导航（路由）this.$router.push(`/home/12?newscontent=marco`)//就是实现路由链接的效果//命名路由对象形式//按名称跳转的方法可以带参数，不会显示在页面上。**注意如果使用path跳转，params不会生效**constlocation={name:"home",params:{nid:12},query:{newscontent:'marco'},};this.$router.push(location)//路径传参this.$router.push({path:'/home',query:{id:'1'}})this.$router.push({name:'home',params:{id:'1'}})//只能使用name//router路由配置path:"/home/:id",//如果没有配置路径，可以请求第一次，刷新页面id会消失//配置路径，刷新页面id会保留{path:'/home/:id',component:Home,name:'home'}name和path的区别jumps就是说1.namename是用params和query传递的，path属性是用来传递参数的。params不能用，会失效。2.Routerx需要配置path:"/home/:id",否则页面的id不会保存到,from,savedPosition){return{x:0,y:0}}})//Addaglobalpre-routenavigationguard//必须登录才能访问的多个接口使用全局守卫（交易相关，支付相关,用户中心相关)//自动跳转到之前没有想到的页面router.beforeEach((to,from,next)=>{//to:代表路由对象，目标（想去的地方）//from:代表Routing对象，start（从哪里开始）//netx:是一个函数，选择放不放，也可以重定向到新的地方//next()就是放手//next(false)不放手//next(path)redirectlettargerPath=to.pathif(targerPath.startsWith('/pay')||targerPath.startsWith('/trade')||targerPath.startsWith('/center')){//查看用户是否登录if(store.state.user.userInfo.name){next()}else{//在登录路径之后添加我们之前要走的路径//有了登录逻辑，我们就可以去到想去没去的地方next('/login?redirect='+targetPath)}}else{next()}})exportdefaultrouterglobalresolutionguard中2.5.0+可以注册一个router.beforeResolveglobalguard这个和router.beforeEach类似，区别是that解析守卫在导航确认之前调用，在所有组件中的守卫和异步路由组件解析完成之后。全局afterEach钩子你也可以注册全局afterEach钩子，然而，与守卫不同，这些钩子不会接受下一个函数，也不会改变导航本身：router.afterEach((to,from)=>{//...})Route-onlyguards你可以直接在路由配置中定义beforeEnterguards:{path:'/addcartsuccess',component:AddCartSuccess,beforeEnter:(to,from,next)=>{letskuNum=to.query.skuNumletskuInfo=sessionStorage.getItem('SKUINFO_KEY')if(skuNum&&skuInfo){next()}else{next('/')}}},组件中的守卫beforeRouteEnter(to,from,next){//在确认渲染组件的相应路由之前调用//否！有能力的！获取组件实例`this`//因为在执行guard之前还没有创建组件实例//如果内部需要使用this，就得使用下面的if(!store.state.user.userInfo.name){//未登录，松手next();}else{//登录后，跳转到首页next("/home");}},//beforeRouteEnter(to,from,next){//next((vm)=>{////通过`vm`访问组件实例vm是你之前想要的//});//}，本地开发没有问题，部署服务器404等问题
