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等问题